html - 是什么导致 FireFox 将 float 向左移动 50% 宽度？

Question

我有一组宽度和高度都相同的 div。全部都设置为向左浮动且占其容器的 50%(容器是页面宽度的 100%)。在某些屏幕宽度下，几个 div 移动了 50% 以上，就好像旁边还有另一个元素一样。

<div class="container">
<div class="pod">
<img />
</div>

<div class="pod">
<img />
</div>
</div>

如果我调整窗口的宽度，我可以解决这个问题。这种情况发生在多个窗口宽度上，并且(据我所知)仅在 FireFox 中发生。

我将在 jsfiddle 上工作，看看我是否可以复制它来展示它。在那之前，有没有人处理过这个问题并发现了问题？

----- 编辑 -----我也可以通过更改页面宽度在 Chrome 中重现这一点。它只是在 FireFox 中更常见。

如果我将框从 50% 更改为 47%，问题就会消失...

----- 编辑 -----结果是我正在做的“拆分”导致了这个问题。

两个 jsFiddle:

div 现在如何响应(我忘了提到一些 div 是“ split 的”。直到现在才认为这是问题的一部分) http://jsfiddle.net/dcp3450/xvMHR/

div 在没有拆分的情况下如何响应: http://jsfiddle.net/dcp3450/Xzrgv/

我认为嵌套的“50%”会导致拆分元素出现一些舍入，从而导致问题。关于这是否属实以及如何解决问题的任何想法？

Answer 1

首先，如果您还没有，请获取 Firebug .

然后使用元素检查器并开始从 DOM 中删除内容。有时，文本可能会溢出分区元素的高度，因此请尝试先删除文本，然后再向上处理父元素。

这是我在没有看到 (X)HTML 和 CSS 的情况下所能告诉您的最多信息。

你也可以在除法元素上设置overflow...

<div style="overflow: scroll;"></div>

……或者……

<div style="overflow: auto;"></div>