Html 位置：绝对值使hr元素的宽度超过100%

在FX和IE中，以下代码生成两个条形图，但蓝色的条形图略宽于浏览器屏幕。任何大小调整都会留下一个水平滚动条，蓝色条的尾部在屏幕左侧。这是从一个大得多的页面上浓缩下来的，我无法删除原始页面中的position:absolute元素。有人能想出如何使蓝色条仅100%宽，使其与红色条匹配，而不会产生水平滚动条吗？你知道这种行为的背后是什么吗？我被难住了。非常感谢

简单：

body {position:relative;}

演示

原因：

---

在非常简短的简化描述中，

位置：绝对和<代码>宽度：100%使用显式定义的
位置：relative使元素相对于直接父元素的宽度或
位置：绝对
，在您的情况下，由于您没有它，它通过添加
位置：相对来获取初始包含块的宽度（也包含
html
元素），而不是
主体的宽度
到
主体
可以使元素相对于
主体
的宽度（除了它的位置）。
事实上，如果没有祖先元素的
位置
不是
静态
，
绝对
定位元素将与根元素所在的初始包含块相关，而不是
元素本身；如果为
元素指定显式宽度，则具有
right:0
声明的
绝对
元素不考虑
元素的宽度。您可以在@HashemQolami True中找到更多详细信息，这就是为什么我说“在一个非常简短的简化描述中”，谈论OP的具体代码情况，而不是box模型的一般定义，但我更新了答案，谢谢。@Arbel感谢更新。我理解你的观点。不过，我认为这可能会引起误解，可能会给读者带来麻烦。@HashemQolami不客气，我恭敬地同意并遵守您的意见：）谢谢您提供的信息！W3学校表示，它将恢复到原来的模式。这似乎是真的。我偶然发现了一个解决方案，那就是在body标记中添加style=“margin:0”。因此，第一个HR似乎遵守正文上的默认边距，而第二个绝对值则跳回html标记，该标记没有默认边距。那是我的猜测。无论如何，0的保证金使它起作用了。我要搞砸你提出的解决方案。谢谢大家。