在Chrome中丟失1％

我正在構建浮動div的3列布局。我有一個20px的填充容器。在容器中，我有一個全寬塊，後面是3列，接着是另一個全寬塊。列浮動到左側。寬度：31％，邊距：0 1％。這增加了99％; 全寬度塊的邊距爲0 2％0 1％。這也增加了99％。在Chrome中丟失1％

Mozilla和IE渲染一切都很完美，但Chrome爲全寬塊添加了1％。我無法理解計算。

你可以看看：schoolscout.co.uk。

來源

2011-03-25 hypeJunction

這是回答同樣的問題？ http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css – ajcw 2011-03-25 22:14:01

因爲不同的渲染引擎以不同的方式計算像素的百分比。 John Resig在他的文章Sub-Pixel Problems in CSS中提供了一個很好的概述。

圖片包含有表示可以出現什麼問題一個很好的例子：

兩個Opera和Safari [和其它基於WebKit的瀏覽器，MK]圓了所有的div的寬度以12像素。這會在所有div的右側留下2px的間隔（注意綠色）。如果你想知道爲什麼你的對齊導航沒有在這些瀏覽器中填充容器的全部內容，現在你知道爲什麼了。從好的方面來說，至少你知道這些容器的寬度都是一樣的，不管是什麼。

看你的頁面，這就是我得到：

    m  b  p  w  p  b  m total 
Chrome 
column_header 6  1  - 674  -  1 13  695 
column   6  -  - 215  -  -  6  227 
Firefox 
column_header 6  1  - 673  -  1 13  694 
column   6  -  - 216  -  -  6  228

來源

2011-03-25 22:12:06

謝謝。這就是我認爲正在發生的事情。有沒有很好的解決方法？我想保持流暢的佈局......你認爲爲webkit定義一個不同的邊緣是有意義的嗎？ – hypeJunction 2011-03-26 11:43:58

@user：如果總和的總和與寬列相同（不包括一些邊距），並且相應地更正這些寬度（您可以執行onload和onresize），則可以使用JavaScript進行測試。 – 2011-03-27 10:05:01

在Chrome中丟失1％

回答

相關問題