Question

这是一个在网络上讨论很多的问题，但经过数小时的研究和反复试验，我仍然无法在IE 7,8或9中按照下列行为获得HTML：

<html>
    <head>
        <title>Untitled Page</title>
        <style>
            .container {
                white-space: nowrap;
                overflow: auto;
                position: absolute;
            }
            .childContainer {
                float: left;
            }
            .box {
                float: left;
                border: 1px solid black;
                width: 20px;
                height: 20px;

            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="childContainer">
                <div class="box"></div><div class="box"></div><div class="box"></div>
                <!-- repeat until off screen -->
                <div class="box"></div><div class="box"></div><div class="box"></div>
            </div>
            <div class="childContainer">
                <span>This should not wrap!</span>
            </div>

        </div>
    </body>
</html>

所需的行为如下：

.box元素不得换行 - 滚动条应显示在窗口底部
.box元素必须具有固定的宽度和高度
.container和.childContainer不能有固定的宽度。 .box元素的数量是任意的
必须在IE7 +和最近版本的Chrome和FireFox

提供的HTML可以在Chrome中运行，我相信它可以支持白色空间：nowrap甚至是块元素。我尝试过使用SPAN元素，但是需要强制它们是一个带浮点数的块元素：left或者忽略width属性。然后它们与DIV元素具有相同的问题。

我确信在不使用JavaScript的情况下必须有一个解决方案，但如果所有其他方法都失败，那么这是一个选项。

Answer 1

http://jsfiddle.net/hjCWN/

我没有在IE中尝试过，但您可以尝试删除white-space: nowrap;并将其替换为margin-right: -99999px;

Answer 2

将盒子放在桌子上。这似乎是唯一实用的方法。

当您尝试将.box元素连续显示时，float: left的使用会产生自己的影响，设置为white-space无法阻止，因为它在不同的水平，所以说。但是通过将它们放入表格行，你可以将它们排成一行。

你甚至可以省去这些元素，只需放样表格的样式：

<style>
table.boxes td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>

在IE中强制阻止块元素不包含（没有固定宽度的父级）

2 个答案: