3

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

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

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

互联网浏览器 (9.1) 互联网浏览器 9.1

Internet Explorer (6) (span bump li box 中的文字) 跨度凹凸 li 框中的文本 — Internet Explorer 6

关于 LI 的 DebugBar，它忽略了预设规则white-space: normal — Internet Explorer 6 关于 LI 的 DebugBar — Internet Explorer 6

关于 SPAN 的 DebugBar，它忽略了继承预设规则white-space: normal — Internet Explorer 6 关于 SPAN 的 DebugBar — 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 中的实时示例

4

1 回答 1

1

见这个网址：http ://cos.livejournal.com/36490.html

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

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

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

于 2012-05-20T18:39:27.250 回答