CSS寬度與子元素的百分比不能在Firefox上工作？

Question

我正在嘗試創建流暢的布局，因此我使用了以％為單位的寬度。 我在Chrome，Safari和IE上測試了該網站。 當它在IE中工作正常時，我認為我的工作已經完成，但是在Firefox中對其進行檢查時，我意識到寬度不正確。 EG：兩個50％的元素都不能放在一行中，寬度為33％的3個元素也不會。 這是我網站上的一個示例：

http://pranalog.com/example.php

如何在Firefox（或大多數瀏覽器）上使用它？

Answer 1

您具有box-sizing: border-box; 在div上設置，要在Firefox中設置border-box ，請添加：

-moz-box-sizing: border-box;

符合您的風格規則。 這是需要得到箱尺寸在Firefox的工作，將此屬性設置為border-box強制瀏覽器呈現div的具有指定寬度和高度，並把邊界和填充里面的div的。

反過來，這可以解決您的問題：在div外部繪制邊框時，元素的總寬度實際上是3 times 33.3% = 99.9%再加上在右側繪制六個1px寬邊框所需的6px ，在每個div的左側。 由於6px大於剩余頁面寬度的0.1% ，因此最后一個div不再適合同一行，並向下移動到下一行。

通過正確設置border-box在div內部渲染border-box ，您將不會遇到此問題。

這是固定的jsFiddle

Answer 2

這是因為您的邊框為1px，請嘗試刪除邊框值，然后將所有三個邊框並排放置。

如果您想保留邊框，則只需將寬度減小到32％

祝好運