测试在FF一个网站，当我遇到一个奇怪的问题来了。
情况是这样的：
box-sizing: border-box已无处不在。<div>，有一个固定的高度。<img>的height: 100%。当我添加填充到包装纸，我期望包装保持相同的高度，并且将图像保持在相同的纵横比，但收缩以适应高度减去填充。包装的宽度应改变以匹配图像的新宽度，再加上填充。
此行为与预期在Chrome和IE在两个OSX和Win7，但在FF包装物的宽度似乎仍然相同的，如果不加入填料。
我失去了一些东西，或者这是箱大小的Firefox中实现中的错误？
这表明捣鼓这个问题：
截图：
第一图像是结果在Firefox，第二个是铬。
这似乎是一个错误，但如果没有施加填充它不计算宽度。它的计算宽度仿佛内容（<img>标签）的宽度为它会在那里没有填充应用。它然后在此不正确地计算内容宽度的顶部添加填充。
即由于没有填料，<img>元件具有167px的宽度。如果再添加填充它应该缩小（因为身高限制的）和.wrapper的宽度现在应该缩小<img>宽度加上边距的宽度。相反，（在FF至少）.wrapper的宽度是unshrunken <img>宽度加上衬垫（167 + 16）的宽度。
至少，这就是我所看到的。
此外，它看起来像你可以看到在Chrome（35.0.1916.114）相同的，如果您在切换开发工具/关闭padding规则。最初，Chrome浏览它的权利，但你看到切换padding后的相同错误的行为。
@ BYossarian的答案是正确的。下面的答案是可能的解决方法在整个问题何时到来。
由于.wrapper被设置为一个特定的高度，我们可以填充添加到图像，并得到我们正在寻找理想的效果。
演示：
<style type="text/css">
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 100px;
background: #99ccff;
}
.wrapper img {
height: 100%;
padding: 8px;
}
</style>
<div class="wrapper">
<img src="http://placehold.it/250x150" alt="">
</div>另一种方法来分析，还必须要小心文档的DOCTYPE声明。
如果你有一个旧的doctype，<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Firefox将不考虑box-sizing: border-box;
对于HTML 5，就必须声明DOCTYPE如下：<!doctype html>它会修复火狐，将采取箱大小正常。