响应式网页设计：div 宽度 + 填充不会跨越包含 div，即使它们等于 100%

Posted 2023-03-06

【中文标题】响应式网页设计：div 宽度 + 填充不会跨越包含 div，即使它们等于 100%

【英文标题】：Responsive web design: div width + padding not going across containing div even though they equal 100%

【发布时间】：2012-03-01 03:40:13

【问题描述】：

我有两个 div，都具有以下 css：

#div-id 
width:96%;
padding: 10px 2% 10px 2%;

现在，我希望这些 div 跨越整个包含的 div，它们在 Firefox 中也是如此，但它们在 webkit 浏览器中的跨度只有大约 99%（尚未在 IE 中测试）。

我需要做些什么才能让它们在 webkit 浏览器的空间中 100% 跨越？

这是我正在使用的东西（在 McDouble 汉堡之上）bueddefeld.com/blog。

【问题讨论】：

在 IE8 中它甚至不起作用。我在与菜单重叠的图像顶部得到<h1>。

【参考方案1】：

这是一个bug in webkit browsers。这就是为什么在创建响应式布局时建议您使用 em 而不是百分比的原因。 Here's the original article 使用推荐的技术来获得适用于所有现代浏览器的真正响应式布局。