2

我在移动网站的标题中遇到了一个奇怪的问题，代码如下：

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

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

包含此代码的 div 比没有填充且宽度为 100% 的 div 略短。

我通过将边距围绕标题中的元素并取消填充并将宽度设置为 100% 来解决它，但我很好奇为什么会这样做，因为我上次检查了 5 + 5 + 90 = 100。

4

3 回答 3

2

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

不久前，我问了一个非常相似的问题，这似乎就是问题所在。参考：Chrome 及其对 %s 的处理

可以在此处找到详细说明问题的帖子（最初由bookcasey共享）。

于 2012-06-29T15:14:43.707 回答
0

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

于 2012-06-29T15:08:19.943 回答
0

解决了css

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

}

但无法找出 0.1% 的填充用于 div#header 的位置...

于 2012-06-30T07:45:52.167 回答