爲什麼在90％寬度div的左側和右側填充5％不會給我100％的寬度？

padding: 10px 5% 10px 5%; 
width: 90%;

您可以在這裏看到的效果 - >http://cssdesk.com/vEMCY

與此代碼在div是分數越短比沒有填充寬度爲100％的div。

我已經解決了邊緣的問題，將標題中的元素放在一邊，並將寬度設置爲100％，但我很好奇爲什麼這樣做是因爲最後我檢查了5 + 5 + 90 = 100.

2012-06-29 SpaceBeers

是什麼瀏覽器，你使用的是看這個？ Chrome或Safari？ –

Chrome和Mobile Safari（都是Webkit），所以你可能會遇到一些bug - > http://css-tricks.com/percentage-bugs-in-webkit/ – SpaceBeers

這就是問題所在，我向你保證。另外，請忽略下面的一些帖子;填充測量與元素的內部沒有任何關係。它們與邊緣的寬度直接對應。 –

基於Webkit的瀏覽器具有百分比度量的舍入錯誤。

有一段時間，我問了一個非常類似的問題，似乎是問題所在。請參閱：Chrome and it's handling of %s

的詳細介紹後can be found here（由bookcasey最初共享）的問題。

2012-06-29 15:14:43

我檢查了我的例子在Firefox和IE瀏覽器，它很好。有趣的bug。這是Chrome第一次成爲我的問題。謝謝。 – SpaceBeers

不知道這是如何定義在CSS規範中，因爲我不傾向於使用百分比填充，而是與包含元素或其自身相關的填充？如果它是元素本身，那麼它將是90％的5％，即4.5％。你會失去1％，就像它看起來那樣。

2012-06-29 15:08:19 wizzardmr42

解決了CSS

.header { 
background: blue; 
width: 90%; 
padding:10px 5.05% 10px 5.05%; 

}

，但無法找出這哪裏是0.1％填充正在爲DIV＃頭......

2012-06-30 07:45:52 impritam

這是一個webkit的bug。 – SpaceBeers

回答