...Bootstrap 3 的 conta"/>

Bootstrap怎么避免跨浏览器的不一致?

Bootstrap怎么避免跨浏览器的不一致?
避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
 
Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
 
容器(Container)
<div class="container">
  ...
</div>
Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。
 
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。
 
请注意,由于内边距(padding)是固定宽度,默认情况下容器是不可嵌套的。
 
.container:before,
.container:after {
  display: table;
  content: " ";
}
这会产生伪元素。设置 display 为 table,会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌,:after 伪元素清除浮动。
 
如果 conteneditable 属性出现在 HTML 中,由于一些 Opera bug,围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。
 
.container:after {
  clear: both;
}
它创建了一个伪元素,并确保了所有的容器包含所有的浮动元素。
 
Bootstrap 3 CSS 有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width,用以匹配网格系统。
 
@media (min-width: 768px) {
   .container {
      width: 750px;
}

推荐阅读