CSS宽度与子元素的百分比无法在Firefox上运行？

Question

我正在尝试创建一个流畅的布局，所以我使用了％的宽度。我在Chrome，Safari和IE上测试了该网站。当它在IE中工作正常我认为我的工作已经完成，但是当在Firefox中检查它时我意识到宽度不正确。 EG：两个50％的元素不适合一行，3个元素不适合33％的宽度。这是我网站上的一个例子：

http://pranalog.com/example.php

如何在Firefox（或大多数浏览器）上使用它？

Answer 1

您在box-sizing: border-box;上设置div，在Firefox中设置border-box，添加：

-moz-box-sizing: border-box;

你的风格规则。需要这样才能让box-sizing在Firefox中运行，将此属性设置为border-box会强制浏览器呈现具有指定宽度和高度的div，并放置边框和填充在div的内部。

这反过来又解决了您的问题：在div的外部呈现边框时，元素的总宽度基本上为3 times 33.3% = 99.9%加上6px以呈现每个1px右侧和左侧的六个div宽边框。由于6px超过了剩余页面宽度的0.1%，因此最后div不再适合同一行，并向下移动到下一行。

通过正确设置div将边框呈现在border-box内，您将不会遇到此问题。

这是一个固定的 jsFiddle

Answer 2

这是因为你有一个1px的边框，尝试删除边框值并且所有三个并排放置。

如果你想保留边框，那么只需将宽度减小到32％左右

祝你好运