css - 为什么设置 box-sizing : content-box; on a singular element?

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 files ，我们看到这些CSS行实际上来自normalize.css project . normalize.css 的目标是创建跨浏览器的一致 CSS 基础。我找到了 a commit来自几年前添加此 CSS 的地方。该提交的解释说明:

Firefox uses different box-sizing and height values to all other browsers. Firefox doesn't currently support box-sizing without the -moz- prefix, so we use both the vendor-prefixed and unprefixed properties to ensure that it matches the content-box value of other browsers. It also requires the height to be set to 0.

该提交然后链接到 issue #133其中指出:

The box-sizing of the HR element is set to border-box in latest Firefox (15) while it is set to content-box in Chrome (22), Opera (12), Safari (5.1), IE9 and IE8.

所以，这听起来像是为了明确地使 hr 元素的 box-sizing 在浏览器中保持一致。在 Bootstrap 元素的上下文中，这可能是不必要的，因为 Bootstrap 已经通过将所有元素设置为 box-sizing: border-box 来提供一致性。