Question

在FF中测试网站时遇到了一个奇怪的问题。

情况如下：

box-sizing: border-box适用于所有内容。
我有一个浮动的包装<div>，高度固定。
包装器内部是<img> height: 100%。

当我向包装器添加填充时，我希望包装器保持相同的高度，并且图像保持相同的宽高比，但缩小以适应高度减去填充。包装器的宽度应该更改以匹配图像的新宽度和填充。

这在OSX和Win7上的Chrome和IE中表现如预期，但在FF中，包装器的宽度似乎保持不变，就像没有添加填充一样。

我是否遗漏了某些内容，或者这是在Firefox中实施box-sizing的错误？

这个小提琴演示了这个问题：

http://jsfiddle.net/3j43Y/1/

截图：

enter image description here Result in Chrome

第一张图片是Firefox中的结果，第二张图片是Chrome。

Answer 1

这似乎是一个错误，但它没有计算宽度，好像没有应用填充。它正在计算宽度，就好像内容（<img>标签）具有未应用填充的宽度。然后在这个错误计算的内容宽度之上添加填充。

即。没有填充，<img>元素的宽度为167px。如果你然后添加填充它应该收缩（因为高度约束）和.wrapper的宽度现在应该是收缩的<img>宽度加上填充的宽度。相反，（至少在FF中）.wrapper的宽度是未包含的 <img>宽度加上填充（167 + 16）的宽度。

至少，这就是我所看到的。

此外，如果您在开发工具中切换padding规则开启/关闭，您可以在Chrome（35.0.1916.114）中看到相同内容。最初Chrome正确，但在切换padding之后，您会看到相同的错误行为。

Answer 2

@ 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>

Answer 3

另一种分析方法，也必须注意文档的doctype的声明。

如果您的文档类型较旧， <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Firefox不会考虑box-sizing: border-box;

对于html 5，有必要声明doctype如下： <!doctype html> 它将修复Firefox，并正确使用框大小。

box-sizing：Firefox中的边框大小调整问题

3 个答案: