我正在尝试创建一个流畅的布局，所以我使用了 % 的宽度。我在 Chrome、Safari 和 IE 上测试了该网站。当它在 IE 中运行良好时，我认为我的工作已经完成，但是在 Firefox 中检查它时，我意识到宽度不正确。EG：两个 50% 的元素不适合一行，三个宽度为 33% 的元素也不适合。这是我网站上的一个例子：
http://pranalog.com/example.php
我怎样才能让它在 Firefox（或大多数浏览器）上工作？
问问题
3986 次
2 回答
2
您已box-sizing: border-box;在div's 上设置，要border-box在 Firefox 中设置，请添加：
-moz-box-sizing: border-box;
符合您的风格规则。这是让box-sizing在 Firefox 中工作所必需的，设置此属性以border-box强制浏览器以指定的宽度和高度呈现div's，并将边框和填充放在div's 内。
这反过来又解决了您的问题：在您的外部呈现边框时div，元素的总宽度基本上是3 times 33.3% = 99.9%渲染每个. 由于大于剩下的页面宽度，因此最后一个不再适合同一行并向下移动到下一行。6px1pxdiv6px0.1%div
div通过正确设置在 's内呈现边框border-box，您将不会遇到此问题。
这是一个固定的jsFiddle
于 2013-09-09T13:27:15.990 回答
1
这是因为您有 1px 的边框，请尝试删除边框值并且所有三个并排放置。
如果您想保留边框，则只需将宽度减小到 32% 左右
祝你好运
于 2013-09-09T13:25:27.933 回答