水平线在火狐浏览器中无法正常显示

Question

一个网页，在IE中正常显示是这样的：

里面有一个水平线（可能有点淡，看不太清），正常显示。
但是到了火狐上···

水平线不是正常显示的了，而是偏到了一边去。

就像这样：

（很淡，可能从图片上看不太清）
What is happen！！！

求助： 这可能是什么原因引起的？
备注： 这个水平线是引用Bootstrap里面的。

贴部分代码：（CSS）

hr {
    display: block;
    width: 100%;
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 0;
  border-top: 1px solid #eee;
}

Answer 1

ie和火狐对dom解析是有差别的

Answer 2

使用评论中“依云”的回答：
“
看起来是滥用浮动和相对定位造成的。你的 hr 是静态定位、无浮动，然而其同级 article 却是相对定位、浮动，所以它们浮走了……它们的父元素 div 根本没撑开。

你可以用 Firebug 多观察观察它们所占用的区块大小和位置什么的。
”