为什么要设置box-sizing:content-box; 在一个单一的元素？

Question

我刚刚浏览了bootstrap.css文件并遇到了以下几行代码:

hr {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

我只有一个问题和一个问题,为什么box-sizing: content-box;在整个文档有明确的时候box-sizing: box-border;？为什么要切换一个单一元素box-sizing: content-box;？

我提供的示例只是设置为元素的框大小的一个实例box-sizing: content-box;,我已经看到这在CSS样式表中已经进行了很多次,并且没有看到这种样式的实用性.

为什么可能box-sizing: content-box;在单个元素中添加一个有用的？有人会提供一个实际的例子吗？

Answer 1

如果我们查看Bootstrap source Less文件,我们会发现这些CSS行实际上来自normalize.css项目.normalize.css的目标是跨浏览器创建一致的CSS基础.几年前我发现了一个提交 CSS 的提交.该提交的解释说明:

Firefox 对所有其他浏览器使用不同的值box-sizing和height值.火狐目前不支持box-sizing无 -moz-前缀,所以我们同时使用供应商前缀和前缀的属性,以确保它符合content-box的其他浏览器的价值.它还需要height设置为0.

该提交然后链接到问题#133,其中指出:

在最新的Firefox(15)中,HR元素的框大小设置为border-box,而在Chrome(22),Opera(12),Safari(5.1),IE9和IE8中设置为内容框.

所以,它听起来像这样被介绍给明确做出box-sizing的的hr跨浏览器的元素是一致的.在Bootstrap项目的上下文中,这可能是不必要的,因为Bootstrap已经通过设置所有元素来提供一致性box-sizing: border-box.