Html 不在firefox上工作的子元素的CSS宽度和百分比？

我试图创建一个流体布局，所以我使用了%的宽度。我在Chrome、Safari和IE上测试了这个网站。当它在IE上运行良好时，我认为我的工作已经完成了，但在Firefox中检查时，我意识到宽度不正确。两个50%的元素不能放在一行中，三个33%宽度的元素也不行。这是我的网站上的一个例子：

---

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

这是因为您的边框为1px，请尝试删除边框值，并将所有三个边框并排安装

如果您想保留边框，只需将宽度减少到32%左右即可

---

祝你好运

你有

框大小：边框框

在

div

上设置，要在Firefox中设置

边框框

，请添加：

-moz-box-sizing: border-box;

你的风格规则。这是在Firefox中工作所必需的，将此属性设置为

边框框

会强制浏览器以指定的宽度和高度呈现

div

，并将边框和填充放置在

div

内

这反过来又解决了您的问题：当边框呈现在

div

的外部时，元素的总宽度基本上是

3倍33.3%=99.9%

加上

6px

所需的，以呈现每个

div

右侧和左侧的六个

1px

宽边框。由于

6px

大于页面剩余宽度的

0.1%

，最后一个

div

不再适合于同一行，并向下移动到下一行

通过正确设置

边框框

在

div

中呈现边框，您将不会出现此问题

---

这里有一个固定的

我在小提琴中犯了这个错误，但是如果你在我的网站上看到它（没有框大小和边框），它仍然会发生，除了你的标记无效（缺少结束div）这一事实之外，它在最近的firefox中对我有效。此问题的常见原因是元素之间的空白。