IE6中的Nowrap继承错误（及早期版本）

Question

我有一些任务要制作一个旋转木马，它会包含几个未定义宽度的元素。所以，最简单的方法 - 通过CSS制作所有元素，然后进行所有JS计算等等。在（bug生产者）IE6中进行测试之前一切顺利。

以下是浏览器中的示例：

Safari（5.1.2），Firefox（10.0.2），Opera（11.62）

Internet Explorer（9.1）

Internet Explorer（6）（span bump li box中的文字）

关于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中的

Live example

Answer 1

请参阅此网址：http://cos.livejournal.com/36490.html

答案，它似乎是我们最喜欢的，Quirks Mode。在Quirks模式下，IE无法识别white-space:normal样式，但会识别其他white-space样式，因此会出现级联问题。

解决方案是阻止IE进入怪癖模式。这就像在页面开头添加有效的Doctype一样简单。

Quirks模式也可能会为您的页面引入其他布局故障，因此这个修复程序应该可以解决您可能遇到的其他问题。