div2 列のレイアウトをラップするという古くからの問題があります。サイドバーがフローティングになっているため、コンテナdivがコンテンツとサイドバーをラップできません。

Firefox の明確なバグを修正するには、さまざまな方法があるようです。

• <br clear="all"/>
• overflow:auto
• overflow:hidden

私の状況では、正しく機能しているように見える唯一のもの<br clear="all"/>は、少しだらしないソリューションです。overflow:auto厄介なスクロールバーが表示され、overflow:hidden確かに副作用があるに違いありません。また、IE7 は動作が正しくないため、この問題に悩まされることはないようですが、私の状況では、Firefox と同じように苦しんでいます。

現在利用できる方法のうち、最も堅牢なものはどれですか?

<div>通常、 のような要素はコンテンツに合わせて大きくなりますが、このfloatプロパティを使用すると、CSS の初心者には驚くべき問題が発生する可能性があります。フローティング要素にフローティングでない親要素がある場合、親は折りたたまれます。

例えば：

この例の親 div は、そのフローティングされた子を含むように展開されませんheight: 0。

この問題をどのように解決しますか？

ここで、ソリューションの完全なリストを作成したいと思います。ブラウザ間の互換性の問題を認識している場合は、指摘してください。

解決策 1

親をフロートします。

長所: セマンティック コード。
短所：常に親を浮かせたいとは限りません。やるとしても、親の親などを浮かしますか？すべての祖先要素をフロートする必要がありますか?

解決策 2

親に明示的な高さを与えます。

長所: セマンティック コード。
短所: 柔軟性がありません。コンテンツが変更されたり、ブラウザーのサイズが変更されたりすると、レイアウトが崩れます。

解決策 3

次のように、親要素内に「スペーサー」要素を追加します。

長所: コードは簡単です。
短所: セマンティックではありません。スペーサー div は、レイアウトのハックとしてのみ存在します。

解決策 4

親を に設定しoverflow: autoます。

長所: 余分な div は必要ありません。
短所: ハックのようです - それはoverflowプロパティの目的ではありません。

コメント? 他の提案？

レイアウトにはyamlを使用し、有名なclearfix cssを使用して、フロートを含むコンテナーが確実に拡張されるようにしています。

Firefox 3、IE6、IE7、IE8、Opera 9、および Google Chrome ではすべて問題なく動作しますが、Firefox 1、Firefox 2、および SeaMonkey には問題があります。問題は、Web サイトで確認できるように、clearfix コンテナーが拡張しすぎることです。

http://www.slagalica.tv/game/mojbroj

以下は、Firefox 2とFirefox 3のレンダリングのスクリーンショットです。

更新: BrowserShots.org のスクリーンショット

残念ながら、統計によると、訪問者の 10% 以上が FF2 を使用しているため、この問題を単純に無視することはできません。clearfix CSS の一部を削除または微調整してみましたが、何をしてもタイマー DIV (緑) がページの残りの部分から大きなマージンで区切られています。

これを解決する方法を知っている人はいますか？

Update2: 最終的にあきらめて TABLE タグを付け、数分で問題を解決しました。したがって、HTML ソースを調べようとしないでください。問題はもはや明らかではありません。

最近のフローティング コンテンツをクリアする最新の方法は何ですか?

親要素に「.clearfix」を追加して、含まれているフロートをクリアする「最近の」最新の方法があり、それはうまく機能します。実際、これは私のお気に入りの方法であり、私が触れるすべてのサイトで今でもこの方法を使用しています。これにより、すべてのブラウザが正しくレンダリングされます。

しかし、私はそれが一種のハックであることを知っており、最近グーグルで調べたところ、多くのフロントエンド開発者が同じように感じ、より真の解決策を望んでいることがわかりました. 私が見つけた結果はそれほど素晴らしいものではありませんでした。いくつかの解決策がありますが、それらは IE7+ でのみ機能し、Opera では少しバグがある場合があります。

とにかく、最近フロートをクリアする最良の方法は何だろうと思っています。

その標準的なフロートの問題。親コンテナ div 内に多数のフローティング要素があります。子はフローティングであるため、親はそれらすべてを含むように拡張されません。

親コンテナ div のオーバーフロー プロパティを「auto」または「hidden」に設定するだけでなく、clearfix ソリューションについても知っています。http://www.quirksmode.org/css/clearing.html オーバーフロー メソッドを設定することは、その 1 つのプロパティとしてはるかに優れているように思えます。私が理解したいのは、clearfix アプローチがこの方法よりも優れているのはいつで、非常に頻繁に使用されていることがわかります。

PS私はIE6について心配していません。

次のコードが FireFox 3.6 で正しく動作しないのはなぜですか? IE7、IE8、および Chrome で問題なくテストしました。

問題:最初のブロック ホバー リンク(表の 3 行目) は、その下にある次のものと同じスタイル/効果を適用しません。

注:独自のテーブルフレームワークを作成しようとしています。このプロジェクトは、私が CSS についてさらに学ぶために行っているものです。始める前は、CSS についてよく知っていると思っていました。しかし、驚いたことに、私は間違っていました。誰かわかったね？先に進みます...補足として、IE6のサポートに時間をかけたくありません。したがって、IE6 に関連する問題が発生した場合は、時間を無駄にしないでください。この質問が完全なCSS/HTMLのストリップダウン/ベアボーンである場合、次のスタイルスクリプトとHTMLがリストされています。私を助けるにはそれで十分なはずです。

CSS:

HTML:

追伸: もしあなたが手伝うことを選んだなら、アシスタントをありがとう。

私のサイトはFF、Safari、Chromeで完璧ですが、IE8でジャッキアップされているというのは新しい概念ではないことを私は知っています。それは言われ、追跡に切り込みます。これは私が嚢胞性線維症の人々のためのソーシャルネットワークのために取り組んでいるホームページです。

http://www.cysticlife.org/Home.php

可能であれば、FF、Safari、Chromeで確認し、次にIE8で確認すると、問題が発生します。一部の画像が表示されていないが表示されており、一部のj-queryが無効になっているため、ポジショニングの問題を想定しています。IE8を使用していないため、トラブルシューティングが困難です。私はclearfixを修正しましたが、IE8でclearfixの問題が解決されたという印象を受けました。

これが何であるかを知っていて、助けたい場合は、問題を解決するために、ここにどのコードを入れてほしいかを教えてください。

よろしくお願いします。

次のマークアップがあります。

および次のスタイル:

次の jQuery を使用して、ビューを交換します。

view1コンテンツをコンテンツに交換するview2と、フッターは元の場所にとどまり、新しいコンテンツの中央の上に移動します。フッターのコンテンツの上にマウスを置くと、その場所にジャンプします。その後、コンテンツを に戻すとview1、フッターは再び元の場所に留まりview2、container.

IE でフッターを適切に再配置するには、どのスタイルを適用できますか? さまざまな組み合わせで、次のすべてを試しました。

• に適用clearfixする#container
• に適用clearfixする#footer
• に適用height: autoする#container
• に適用height: 30pxする#footer input
• に適用widgth: 100pxする#footer input

サイドバーの高さに苦労しています。

コンテナは正しい高さ（中のコンテンツの高さ）を表示していますが、その高さの100％を使用しているはずのサイドバーがまだ表示されていません。

以下の提案の1つ（http://www.quirksmode.org/css/clearing.html）を実装しましたが、サイドバーがまだ表示されません。

これはプロにとってはシンプルなものだと確信しています。ヒントをいただければ幸いです。

ありがとう、

トム

これが私のコードです：http：//jsfiddle.net/tomperkins/wy52B/

ここで提供されるこのclearfixソリューションに注意してください。

HTML [xmlns]に別のスタイルが定義されているのはなぜですか？

これは特定のブラウザをターゲットにするように設計されたCSSハックですか？

更新：これが問題のコードです。私の意見では、回答のいくつかは明らかにマークから外れているためです。

更新2：それがハックであることはすでに多かれ少なかれ確立されています。しかし、私はそれを詳細に説明する外部参照が必要です。たとえば、どのブラウザに適用され、どのような問題を修正することを目的としていますか？