Question

我有一个无序列表。列表项为inline-block。我无法使用float:left，因为我需要将它们垂直对齐到底部。一切都很好。整个布局适用于除IE7之外的所有浏览器，它似乎在 IE Inspector 中的whitespace:nowrap;上应用ul属性，但并未真正应用它。当浏览器的宽度很小时，列表项仍会堆叠。

div#container {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
div#container > ul {
    white-space:nowrap;
}
div#container > ul > li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: bottom;
}

不能张贴小提琴。因为jsFiddle本身并不适用于IE7。

Answer 1

IE7必须以符合标准的模式运行才能使CSS组合器正常工作。

您可以运行alert(document.compatMode);以查看您正在运行的模式。如果您收到BackCompat，那么您将在Quirks模式下运行，而CSS组合器将无法运行。如果您收到CSS1Compat，那么IE7将以标准模式运行，CSS组合器将起作用。

最简单的解决方案是简单地从CSS中删除组合器：

div#container {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
div#container ul {
    white-space:nowrap;
}
div#container ul li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: bottom;
}

如果无法移除组合器，则需要use a doctype以使IE7采用符合标准的模式。在我的测试中，在文档顶部添加<!DOCTYPE html>在IE7中运行良好。

IE7：whitespace nowrap不起作用

1 个答案: