为什么在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

回答