css - IE6 のみの Div ラッピング

Question

ここで問題を確認できます: http://jsfiddle.net/6WuVz/7/

これは他のすべてのブラウザー (画像上部) では機能しますが、ie6 で表示すると (画像下部) 正しくラップされません。

注: 互換表示を使用して IE5 Quirks を選択すると、IE の新しいバージョンでこれを確認できます。

Answer 1

私が知る限り、タイトルを保持する div には幅が設定されていません。したがって、IEは拡張するように指示しており、拡張すると、スペースがある場所で下に移動します。IE6 のみの幅を設定してみて、問題が解決するかどうかを確認してください。

さらに、IE6 にはいくつかの問題がありoverflow: hiddenます。通常は と組み合わせて使用position: relative​​されますが、似たようなものに遭遇する可能性があります。前の解決策が機能しない場合は、これを試すことができます。

編集- 明示的な幅を設定したくないので、他のいくつかのオプションを考えました:

1. clear: none非浮動要素に明示的に設定
2. 問題のテキストのspan代わりに要素を使用してください（はインラインですが、はブロックであるため、親の幅に拡張するべきではありません。あなたがしていることを考えると、おそらく を使用する方がセマンティックな意味があります）。divspandivspan
3. JavaScript を使用しdivて IE6 のフロートの幅を決定し、それに応じて非フロートのサイズを設定しますdiv(ここでも、HTML で条件付きコメントを使用して IE6 のみをターゲットにすることができます)。
4. IE6 をサポートする価値があるかどうかを真剣に検討してください (つまり、視聴者がかなり技術に精通しているサイトにある場合は、おそらく IE6 のサポートを完全に見送ることができます。または、少なくとも、この問題を修正すると、収益よりも多くの費用がプロジェクトにかかります。わかります;しかし、医療提供者と取引している場合は、おそらく IE6 に対処する必要があります)。

IE6 には非標準のボックス モデルがあり、ブロック レベルの要素に対して、コンテンツを「シュリンク ラップ」するのではなく、コンテナーの全幅を拡張するように指示します。それらのコンテンツは、許可されている幅よりも大きく、floatプロパティはフロートされた要素をドキュメント フローから取り除きます (これが、 を にすると、フロートされたコンテンツの上に実行される理由overflow: hiddenですoverflow: visible)。新しいブラウザーは、基本的にプロパティの「更新された定義」(いわば) を持っていfloatます。これは、通常のドキュメント フローからそれを取り出すことに加えて、浮動要素の周りを兄弟コンテンツが流れるように指示します。さらに情報が必要な場合は、CSS-tricks に float に関する優れた記事があり、A List Apartも同様です。