Css 为什么设置框大小：内容框；关于单数元素？

我刚刚浏览了bootstrap.css文件，发现了以下几行代码：

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

我有一个问题，只有一个问题，为什么显式

框大小：内容框当整个文档有
框大小：框边框时？为什么要将单个元素切换为
框大小：内容框

我提供的示例只是将元素的框大小设置为
box size:content-box的一个实例
，我已经在CSS样式表中多次看到这种情况，但从未见过这种样式的实用性

为什么可能会添加一个
框大小：内容框到单个元素是否有用？有人能提供一个实际的例子吗
 如果我们看一下，我们会发现这些CSS行实际上来自。css的目标是跨浏览器创建一致的css库。我在几年前发现这个CSS是在哪里添加的。对此的解释是：

Firefox使用不同的
框大小
和
高度
值来调整所有其他
浏览器。Firefox目前不支持在没有
-moz-
前缀，因此我们同时使用供应商前缀和非供应商前缀
属性，以确保它与其他属性的
内容框
值匹配
浏览器。它还要求将
高度设置为
0

该提交然后链接到哪些国家：

HR元素的框大小在最新版本中设置为边框框
Firefox（15）在Chrome（22）中设置为内容框，Opera
（12） 、Safari（5.1）、IE9和IE8

因此，这听起来像是为了明确地使
hr
元素的
框大小在浏览器中保持一致。在Bootstrap项目的上下文中，这可能是不必要的，因为Bootstrap已经通过将所有元素设置为
box size:border box
来提供一致性，您在Bootstrap中引用的代码实际上来自Normalize.css:

文档仅限于“解决Firefox和其他浏览器之间的差异。”也就是说，
框大小：边框框
强制高度和宽度值同时包含填充和边框。Firefox使用边框呈现使用hr标记时看到的线条。如果
框大小：边框框和<代码>高度：0 < P>当你认为它与高度配对时：内容框设置更有意义：0。如果元素具有高度：0和框大小：边框框，则意味着hr必须具有零高度，甚至包括边框。换句话说，它是看不见的。另一方面，内容框意味着边框不作为高度的一部分计算，因此即使高度为0，边框仍然可以看到

众所周知，hr元素的样式在浏览器中不一致，他们显然决定将高度标准化为0以消除一些不一致。通过扩展，这可能还意味着他们打算用border属性设置hr元素的样式。诚然，这个决定本身让我觉得有点奇怪，因为我认为Opera不太尊重人力资源的边界。因此，虽然我不确定它对我来说是否有完美的意义，但它并不像一开始看起来那么奇怪。
将其设置为内容框会将其重置为css默认值，如果我知道原因，那么我会回答而不是评论…@ToniLeigh，谢谢，我知道，但设置
框大小：内容框似乎很重要，因为我越来越多地看到这种显式声明，但我对为什么要这样做知之甚少。我不是一个CSS专家，我相信有人会来回答，并提供一个很好的例子；css有一些有趣的默认值，其中一个是box sixing，它应该是border box，以便更轻松地计算大小，这就是为什么您经常在boiler plate中看到
*{box sizing:border box；}
，并重置。至于为什么，我真的不知道为什么内容框会在
上更受欢迎。这个例子解释了为什么
hr
的引导标准化框大小：我在FF的当前版本中运行了一个测试，即Chrome，与Safari相比，使用边框框进行渲染没有什么区别，因此这可能是为了支持先前版本的FF.Fantastic，我不认为这是因为浏览器不一致，但你的回答很好地解释了这一点。只是出于好奇，你搜索了什么来发现这一切？：）@AlexanderSolonik我首先在Bootstrap repo中搜索css
hr{
，这使我找到了他们的normalize.less文件。从那里可以很容易地查看normalize项目的提交历史，以确定他们何时添加了css。感谢您的帮助，先生：）
/**
 * Address differences between Firefox and other browsers.
 */

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