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

概述在FF中测试网站时,我遇到了一个奇怪的问题. 情况是这样的： > box-sizing：border-box适用于所有内容. >我有一个浮动的包装器< div>,具有固定的高度. >包装内部是一个< img>身高：100％. 当我向包装器添加填充时,我希望包装器保持相同的高度,并且图像保持相同的宽高比,但缩小以适应高度减去填充.包装器的宽度应更改为与图像的新宽度以及填充相匹配. 这在OSX和Win 在FF中测试网站时,我遇到了一个奇怪的问题.

情况是这样的：

> Box-sizing：border-Box适用于所有内容.
>我有一个浮动的包装器< div>,具有固定的高度.
>包装内部是一个< img>身高：100％.

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

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

我错过了什么,或者这是在firefox中实现盒子大小调整的错误？

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

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

截图：

第一张图片是firefox中的结果,第二张图片是Chrome.

解决方法 这似乎是一个错误,但它没有计算宽度,好像没有应用填充.它正在计算宽度,好像内容(< img>标记)具有应用无填充时的宽度.然后在这个错误计算的内容宽度之上添加填充.

即,没有填充,< img> element的宽度为167px.如果你然后添加填充它应该收缩(因为高度约束)和.wrapper的宽度现在应该是收缩的宽度< img>宽度加上填充.相反,(至少在FF中).wrapper的宽度是未被忽略的< img>的宽度.宽度加上填充(167 16).

至少,这就是我所看到的.

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

总结

以上是内存溢出为你收集整理的html – box-sizing：Firefox中的边框大小调整问题全部内容，希望文章能够帮你解决html – box-sizing：Firefox中的边框大小调整问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。