4

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

情况是这样的：

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

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

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

我是否遗漏了什么，或者这是在 Firefox 中实现 box-sizing 的错误？

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

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

截图：

在此处输入图像描述 结果在 Chrome

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

4

3 回答 3

4

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

即没有填充，<img>元素的宽度为167px。如果然后添加填充，它应该会缩小（因为高度限制），并且.wrapper' 的宽度现在应该是缩小后的<img>宽度加上填充的宽度。相反，（至少在 FF 中）.wrapper的宽度是未收缩 <img>宽度加上填充 (167 + 16) 的宽度。

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

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

于 2014-05-27T12:16:53.567 回答
1

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

于 2015-12-01T07:35:49.623 回答
0

另一种分析方式，也是需要注意文档的doctype的声明。

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

对于 html 5，有必要如下声明 doctype： <!doctype html> 它将修复 Firefox，它将正确地采用 box-sizing。

于 2019-02-04T09:49:06.383 回答