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;,在你的情况下,由于不必它,它得到的含初始块的宽度(这也包含html元素而不是body,通过添加position:relative;到body您创建元素的宽度相对于body(除了它的位置).