是什么导致 FireFox 将浮点数向左移动 50% 宽度？答案

【问题标题】：What causes FireFox to shift a float left 50% width over?是什么导致 FireFox 将浮点数向左移动 50% 宽度？
【发布时间】：2013-09-25 06:33:21
【问题描述】：

我有一组宽度和高度相同的 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%，问题就会消失...

----- 编辑 ----- 原来我正在做的“分裂”导致了这个问题。

两个 jsFiddles：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

这是我在没有看到 (X)HTML 和 CSS 的情况下能告诉你的最多的内容。

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

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

...或...

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

【讨论】：

每个 div 都有相同的内容（文本和图像大小）。 firebug 是我每次都使用 FF 安装的第一个插件之一。 :)
添加了一些 jsfiddle 示例
另外，@john，我删除了所有元素，只在 div 中保留了图像，因此任何文本都不会引起问题。
到哪些元素？豆荚、豆荚还是种子？我尝试将其添加到每个中，但问题仍然存在。
哦，你说的是宽度……对不起，我的一天结束了。尝试 overflow 属性的 scroll 或 auto 值。有更精细的 CSS 属性可供使用，这是最初的方法。