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对所有其他值使用不同的box-sizing和height值浏览器。如果没有，Firefox目前不支持box-sizing -moz-前缀，因此我们使用供应商前缀和未加前缀的属性以确保它与其他的content-box值匹配浏览器。它还需要将height设置为0。

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

HR元素的盒子大小最近设置为border-box Firefox（15），它被设置为Chrome（22），Opera中的内容框（12），Safari（5.1），IE9和IE8。

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

Answer 2

当您考虑与高度配对时，内容框设置更有意义：0。如果一个元素的高度为：0和box-sizing：border-box，那就意味着hr必须具有零高度，甚至包括边框。换句话说，它是不可见的。另一方面，内容框表示边框不计入高度的一部分，因此即使高度为0，边框仍然可见。

样式化hr元素在各种浏览器中都是不一致的，并且他们显然决定将高度标准化为0以消除一些不一致性。通过扩展，这可能也意味着他们希望hr元素使用border属性进行样式化。当然，这个决定本身让我觉得有些奇怪，因为我认为Opera并没有很好地尊重hr的边界。因此，虽然我不确定这对我来说是否具有完美意义，但它并不像它最初看起来那么奇怪。

Answer 3

您在bootstrap中引用的代码实际上来自Normalize.css https://necolas.github.io/normalize.css/：

iteration

文档仅限于，＆＃34; Firefox和其他浏览器之间的地址差异。＆＃34;也就是说，tapply(df1$x, INDEX = df1$iteration, nonsenseFunction)强制高度和宽度值包括填充和边框。 Firefox使用边框来渲染使用hr标记时看到的行。如果同时使用/** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }和box-sizing: border-box，则与其他浏览器不同，您在FF中看不到任何内容。

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

3 个答案: