Question

我有一个带有子div的div，我试图创建幻灯片。我有显示inline-block的子div，除了IE＆lt; = 9之外，一切看起来都很棒。在IE＆lt; = 9中，每个div.contentItem正在垂直显示。

我使用white-space: nowrap和inline-block（而不是float:left）因为更多div.contentItem被异步添加，我不想重新计算{{1}每次添加新元素时都会增加宽度。所以，出于这个原因，我宁愿远离div.content，除非有办法使用浮点而不必指定宽度。

注意我无法更改母版页上的文档类型，并且会被我们的cms中的许多其他页面使用。回归测试太多了。

HTML

float:left

CSS

<!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>

Answer 1

如果您将white-space: nowrap保留在父级div上，则应该可以在孩子身上使用float: left，而无需为父级定义宽度。

请参阅此Fiddle illustration我之前的其他帖子。它也适用于此。您可以调整结果窗口的大小，以查看white-space设置为nowrap的两个版本（无论是浮动块还是内联块），它们始终保持在一行上。

Answer 2

我将div.contentItem更改为span.contentItem。现在项目显示为内联，无需更改css。

Answer 3

内联块对于空白是敏感的，如果内容与其父级一样宽，它可能会破坏并转到下一行......也许你需要这样的东西

<body>
    <div class="content">
        <div class="contentItem">...</div><div class="contentItem">...</div><div class="contentItem">...</div>
    </div>
</body>

从内联元素周围删除所有空格应该使它们完全符合您希望它们的大小

Answer 4

IE＆lt; = 8不完全支持display: inline-block。 Read here.

而是使用inline-block，尝试将此代码用于幻灯片： http://jsfiddle.net/9ACNT/

IE9错误地显示内联块div

4 个答案: