html – position:absolute使hr元素的宽度超过100%
发布时间:2020-12-14 22:33:09 所属栏目:资源 来源:网络整理
导读:在FX和IE中,以下代码生成两个条形图,但蓝色条形图比浏览器屏幕略宽.任何调整大小都会留下一个水平滚动条,蓝色条的尾部在屏幕左侧.这是从一个更大的页面煮熟而我无法删除位置:原始中的绝对元素.任何人都可以弄清楚如何使蓝色条只有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(除了它的位置). (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |