html - IE6(及更早版本)中的 Nowrap 继承错误

Question

我有一些任务要做一个旋转木马，它可以容纳几个没有定义宽度的元素。所以，最简单的方法——通过 CSS 将所有元素排成一行，然后进行所有 JS 计算等等。在(错误生产者)IE6 中测试之前一切顺利。

这里是浏览器中发生的示例:

Safari (5.1.2)、Firefox (10.0.2)、Opera (11.62)

互联网浏览器 (9.1)

Internet Explorer (6)(span bump li 框中的文本)

关于 LI 的调试栏，它忽略预设规则 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;
  }

Live example在 jsFiddle 中

Answer 1

查看此网址:http://cos.livejournal.com/36490.html

答案似乎是我们最喜欢的怪癖模式。在 Quirks 模式下，IE 无法识别 white-space:normal 样式，但可以识别其他 white-space 样式，因此存在级联问题。

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

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