position：absolute使hr元素超过100％

Question

在FX和IE中，以下代码生成两个条形图，但蓝色条形图比浏览器屏幕略宽。任何调整大小都会留下一个水平滚动条，蓝色条的尾部在屏幕左侧。这是从一个更大的页面煮熟而我无法删除位置：原始中的绝对元素。任何人都可以弄清楚如何使蓝色条只有100％宽，所以它匹配红色，不会导致水平滚动条？任何想法这种行为背后的原因是什么？我很难过。非常感谢。

<hr style="border:1px solid red; width:100%;"/>
<hr style="position:absolute; border:1px solid blue; width:100%;" />

Answer 1

简单地：

body {position:relative;}

演示 http://jsfiddle.net/qyvtzyfh/

<强>原因：

在一个非常简短的简化说明中，元素上的position:absolute;和width:100%;使元素的宽度相对于具有明确定义的position:relative;或position:absolute;的直接父级，在您的情况下，因为您没有它，它通过添加{{1}来获取初始包含块的宽度（包含html元素）而不是body {}为position:relative;，您可以使元素的宽度相对于body（除了它的位置）。