0

这是网络上一个高度讨论的问题，但经过数小时的研究和反复试验，我仍然无法让下面的 HTML 在 IE 7、8 或 9 中按预期运行：

<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 中有效，我相信它尊重 white-space: nowrap 即使对于块元素。我尝试过使用 SPAN 元素，但需要将它们强制为带有 float: left 的块元素，否则将忽略宽度属性。然后它们具有与 DIV 元素相同的问题。

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

4

2 回答 2

2

http://jsfiddle.net/hjCWN/

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

于 2012-02-03T07:41:48.620 回答
1

把盒子放在桌子上。这似乎是唯一可行的方法。

当你试图让.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>
于 2012-02-03T07:44:34.133 回答