如何在浏览器中修复css框模型的布局差异？

Question

我有一个带有标题的两列布局。 Firefox的视图在侧面有几个px。它在IE中很好用。我需要插入div来在第一列的标题和右侧创建填充。

Answer 1

我曾多次亲自打过这样的事情，所以我决定转而使用Twitter Bootstrap。使用他们的类命名约定，我严重怀疑你会有更多的列问题。你也会有一个移动友好的布局......只是一个想法！

以下是使用Twitter Bootstrap查看两列的示例。屏幕的整个宽度分为12段。按比例，第一列的宽度是第二列的两倍，数字（8和4）的总和必须等于12.您可以将它们调整为听觉内容。

<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>

Answer 2

*,
*:before,
*:after {
  box-sizing: border-box;
}

是一种简单明了的方法。它与Chrome Dev Tools用于向您展示元素的盒子模型相同。根据{{​​3}}，支持是

• Chrome（any）：box-sizing

• Opera 8.5+：box-sizing

• Firefox（任何）：-moz-box-sizing

• Safari 3：-webkit-box-sizing（5.1+版本中没有前缀）

• IE8 +：box-sizing

根据CSS-Tricks，

  

border-box呈现width和height属性包括   填充和边框，但不是边距。这是使用的盒子模型   文档处于Quirks模式时的Internet Explorer。

请注意，某些第三方软件（包括Google地图和Google自定义搜索引擎）冲突可能与* { box-sizing: border-box; }冲突，在这些情况下，您需要使用以下内容恢复该元素：

.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

与Bootstrap的MDN一样。

关于绩效的考虑

如果您关注性能，可以按照third party support的建议使用.main > *方法，但上次性能会大幅提升。