为什么90％宽度div的左右5％填充不能给我100％的宽度？

Question

我的移动网站标题出现了一个奇怪的问题，其中包含以下代码：

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

你可以在这里看到效果 - ＆gt; http://cssdesk.com/vEMCY

使用此代码的div比没有填充且宽度为100％的div略短。

我已经解决了这个问题，将边距中的元素放在边缘并取下填充并将宽度设置为100％但是我很好奇为什么这样做是因为最后我检查了5 + 5 + 90 = 100。

Answer 1

基于Webkit的浏览器存在百分比测量的舍入错误。

不久前，我问过一个非常相似的问题，这似乎是个问题。请参阅：Chrome and it's handling of %s

详细说明问题的帖子 can be found here （最初由书架分享）。

Answer 2

不确定CSS规范中是如何定义的，因为我不倾向于使用百分比填充，但填充是否与包含元素或其自身相关？如果它是元素本身那么它将是90％的5％，即4.5％。你会失去1％，就像它看起来那样。

Answer 3

解决了css

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

}

但是找不到这个0.1％填充在div＃header ...

中的位置