Question

当我处理我的一个项目时，我发现CSS box-sizing属性不会在Firefox中自动继承。但是，Chrome会为您完成这项工作。就我而言，就像：

<form style="box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;"> <input id="input1"></input> <input id="input2"></input> </form>

firefox中的两个输入不会继承box-sizing属性。

我是否应该在将来手动将其添加到子节点？我错过了任何约定吗？

谢谢！

Answer 1

从链接中可以看到box-sizing属性不继承（默认情况下） - 实际上，文本<input>元素具有计算的box-sizing值content-box {未指定类型属性将默认为text），例如大多数元素 - 例外是按钮和某些替换元素，如<meter>，{{ 1}}，<textarea>等都具有<progress>的计算box-sizing值

我不确定是什么让您认为Chrome会从其父级继承border-box值。如果你看一下计算出的样式，它会清楚地说box-sizing。

http://jsfiddle.net/4ghd6/1/

Answer 2

你总是可以尝试

form, form * {box-sizing: border-box;}

Answer 3

我通常会在我的CSS中添加它 - 通常在重置后立即添加。

看看这个Box-sizing

你缺少盒子大小：border-box; -

* {box-sizing：border-box;

-moz-box-sizing：border-box; -webkit-box-sizing：border-box; }   IE不需要供应商特定的CSS -ms-box-sizing：border-box;是   不需要

CSS box-sizing继承了跨浏览器

3 个答案: