html - Nowrap IE6 (およびそれ以前のバージョン) の継承バグ

Question

幅が定義されていない複数の要素を保持するカルーセルを作成するタスクがあります。したがって、最も簡単な方法は、すべての要素を CSS で一列に並べてから、すべての JS 計算などを行うことです。（バグプロデューサー）IE6でテストする前は、すべてうまくいっていました。

ブラウザで何が起こっているかのサンプルを次に示します。

サファリ (5.1.2)、Firefox (10.0.2)、オペラ (11.62)

インターネット エクスプローラー (9.1)

Internet Explorer (6) (スパン バンプ リ ボックス内のテキスト)

LI に関する DebugBar、プリセット ルールwhite-space: normal を無視しています— Internet Explorer 6

SPAN に関する DebugBar、継承の事前設定規則white-space: normal を無視しています— Internet Explorer 6

ここで HTML のサンプル:

<div class="carousel">
  <div class="box">
    <ul>
      <li>
        <span>Some text</span>
      </li>
      <li>
        <span>Some longer text</span>
      </li>
      <li>
        …
      </li>
    </ul>
  </div>
</div>

それを管理する CSS の一部:

div.carousel {
  width: 700px; height:200px;
  }
  div.carousel div.box {
    width: 100%; height: 100%;
    overflow: hidden;
    }
    div.carousel div.box ul {
      display: block; 
      white-space: nowrap; /* to make all inside elements lay in row */
      }
      div.carousel div.box ul li {
        margin-left: 23px;
        width: 130px; height: 150px;
        display: inline-block;
        vertical-align: bottom;
        white-space: normal;
        }

IE6 以前のボックス修正:

div.carousel div.box ul li {
  display: inline;
  zoom: 1;
  }

jsFiddle での実際の例

Answer 1

この URL を参照してください: http://cos.livejournal.com/36490.html

答えは、私たちの昔からのお気に入り、Quirks Mode のようです。Quirks モードでは、IE はwhite-space:normalスタイルを認識しませんが、他のwhite-spaceスタイルを認識するため、カスケードの問題が発生します。

解決策は、IE が quirks モードになるのを止めることです。これは、ページの先頭に有効な Doctype を追加するだけの簡単なものです。

Quirks モードはページに他のレイアウトの不具合をもたらす可能性が高いため、この 1 つの修正で他の問題も解決できるはずです。