在 FX 和 IE 中，以下代码生成两个条，但蓝色条比浏览器屏幕稍宽。任何调整大小都会留下一个水平滚动条，蓝色条的尾部在屏幕外向左。这是从一个更大的页面中归结出来的，我无法删除原件中的 position:absolute 元素。谁能弄清楚如何使蓝色条只有 100% 宽，以便它与红色条匹配并且不会导致水平滚动条？知道这种行为背后的原因吗？我很难过。非常感谢。
<hr style="border:1px solid red; width:100%;"/>
<hr style="position:absolute; border:1px solid blue; width:100%;" />最佳答案
简单地:
body {position:relative;}
演示 http://jsfiddle.net/qyvtzyfh/
原因:
在一个非常简短的简化描述中，元素上的 position:absolute; 和 width:100%; 使元素的宽度相对于直接父级具有明确定义 position:relative; 或 position:absolute;，在你的情况下，因为你没有它，它获得初始包含 block 的宽度(其中包含html 元素)而不是 body，通过将 position:relative; 添加到 body 您可以设置宽度元素相对于 body 的位置(除了它的位置)。
关于html - 位置 :absolute makes an hr element more than 100% wide，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25900825/