html – position：absolute使hr元素的宽度超过100％

在FX和IE中,以下代码生成两个条形图,但蓝色条形图比浏览器屏幕略宽.任何调整大小都会留下一个水平滚动条,蓝色条的尾部在屏幕左侧.这是从一个更大的页面煮熟而我无法删除位置：原始中的绝对元素.任何人都可以弄清楚如何使蓝色条只有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;宽度：100％;在元素上使元素的宽度相对于直接父元素具有明确定义的位置：relative;或者position：absolute;,在你的情况下,因为你没有它,它通过添加position：relative;得到初始包含块(也包含html元素)而不是body的宽度.在body中,你可以使元素的宽度相对于body(除了它的位置).

原文地址：https://www.jb51.cc/html/242561.html