基於百分比佈局的差距

Question

我遇到基於百分比的佈局有問題。這裏是我的代碼http://jsfiddle.net/uHkXH/

如果您在Mac上使用Safari或Opera，或者在Windows或iPhone iPad上使用IE7，則會在右側看到間隙。但是四個盒子的寬度，填充和邊距應該是100％。我不明白爲什麼還有差距。

有沒有人可以解釋這個問題，並幫助我解決它？非常感謝你！

Answer 1

它是某些瀏覽器嘗試舍入子像素（小數）寬度的問題。百分比自動轉換爲像素。

如果在jsfiddle中查看並計算元素的像素計算寬度，則它們不會疊加到容器元素的寬度上。

下面是更多的一些信息 http://css-tricks.com/percentage-bugs-in-webkit/

和

How do I get around the IE CSS percentage rounding problem?

和

嗨，

我沒有關於瀏覽器的具體細節，但我注意到了過去的 。

當處理寬度像素：

火狐將全面125.5px高達126px和125.4px將四捨五入 到125px。

歌劇院將把126.9px爲126px（但它將把126.999爲127px !!）

IE忽略所有的小數點和對待126.9999px爲126px。

處理百分比時。

Opera似乎沒有注意到 百分比的所有小數部分。例如33.9%只會等於33％。因此，在1000px寬度的Opera中，三個浮點數爲33.333％的 Opera將在右邊緣顯示10px 間隔。

Mozilla似乎保持所用百分比的小數部分爲 的百分比，並且最多隻會在完整的 寬度上出現1個像素。

IE將每個部分單獨向上或向下舍入，因此對於三個 浮點數可能會過大3個像素，從而導致浮點數下降。

要停止浮動下降，即您可以應用一個負的權利 保留到最後一個浮動將吸收額外的空間。 （margin-right：-3px）。

對於歌劇來說，沒有辦法治療，但可能使最後一個元素適合 所需的空間或使元素大於需要， 應用較大的右側負邊距。

這就是大多數人僅僅使用33％的原因，因爲然後他們知道它將適合所有的瀏覽器，即使有一個小小的差距，根據情況可能不會明顯。 （例如背後的元素背景 可能會隱藏它的顏色。）