IE6（及更早版本）中的 Nowrap 继承错误答案

【问题标题】：Nowrap inheritance bug in IE6 (and earlier version)IE6（及更早版本）中的 Nowrap 继承错误
【发布时间】：2012-05-21 02:39:27
【问题描述】：

我有一些任务要制作一个轮播，它可以容纳几个未定义宽度的元素。所以，最简单的方法——通过 CSS 将所有元素排成一行，然后进行所有 JS 计算等等。在（错误生成器）IE6 中进行测试之前，一切都很顺利。

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

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

Internet Explorer (9.1)

Internet Explorer (6)（文本在 span bump li 框中）

关于 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;
  }

Live example 在 jsFiddle 中

【问题讨论】：

欢迎来到IE6的精彩世界。（但说真的，你并不真的担心比那个更旧的版本，是吗？？？）
当然不是，IE6是我的终结

标签： html css internet-explorer internet-explorer-6

【解决方案1】：

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

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

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

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

【讨论】：