我有一个带有子 div 的 div，我正在尝试用它创建幻灯片。我让子 div 显示 inline-block，除了在 IE<=9 中，一切看起来都很棒。在 IE<=9 中，每个 div.contentItem 都是垂直显示的。
我使用了 white-space: nowrap 和 inline-block(而不是 float:left)因为更多的 div.contentItem 是异步添加的，我不想在每次添加新元素时都重新计算 div.content 的宽度。因此，出于这个原因，我宁愿远离 float:left 除非有一种无需指定宽度即可使用 float 的方法。
注意 我无法更改文档类型，因为它在母版页上并被我们的 cms 中的许多其他页面使用。过多的回归测试。
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div class="content">
<div class="contentItem">...</div>
<div class="contentItem">...</div>
<div class="contentItem">...</div>
<div class="contentItem">...</div>
<div class="contentItem">...</div>
<div class="contentItem">...</div>
<div class="contentItem">...</div>
</div>
</body>
</html>
CSS
.content {
white-space: nowrap;
margin-left: 256px;
position: relative;
padding-top: 14px;
}
.contentItem {
display: -moz-inline-stack;
display: inline-block !important;
*display: inline;
margin: 0 14px 0 0;
vertical-align: top;
zoom: 1;
}
最佳答案
如果您将 white-space: nowrap 保留在您的父 div 上，您应该能够在您的 child 上使用 float: left 而不必为 parent 。
查看此 Fiddle illustration我之前为另一篇文章做过。它也适用于此。您可以调整结果窗口的大小，以查看将 white-space 设置为 nowrap 的两个版本(无论是 float block 还是内联 block )它们始终保持在一行中。
关于html - IE9 不正确地显示内联 block div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12465307/