csslint -破盒模型

Question

我在样式表中使用了CSSLint，但是我得到了一个我不理解的警告。

考虑下面的CSS代码：

div {
    width: 50px;
    height: 50px;
    border: 1px solid;
}

CSSLint说：“破碎的盒子模型:使用高度和边框。”“断框模型:对边框使用宽度。”

为什么我不应该对边框使用宽度/高度？

Answer 1

我认为CSSLint正试图在读者周围强制实施一组良好的实践，而不必理解盒子模型的含义。归根结底，我完全理解框模型，并且理解您的css生成52px的“实际”宽/高，这可能是为了防止误解。

就我个人而言，我会忽略它。它说的是“警告”而不是错误，因此是主观的。

Answer 2

这是一个警告，而不是一个错误，所以你很好！

它警告您的是，在标准盒子模型中，border的宽度是您指定的高度/宽度之外的。

因此，在您的示例中，页面上框的实际高度和宽度将为52像素。

CSSLint警告你这一点，因为你可能没有意识到这一点，因此你的布局可能并不完全像预期的那样。

如果你意识到了这一点，并在布局中考虑到了这一点，那么你可以在CSSLint中取消勾选“注意破碎的盒子模型”复选框来抑制这一警告。

顺便说一句，这同样适用于padding。

Answer 3

旧的Internet Explorer版本(与其他版本相比)使用不同的方法来计算事物的宽度。旧的IE测量包括填充和边框的盒子，新的东西测量没有填充和边框的内容的大小。为了确保您的站点在两种类型的框模型中显示一致，您可以选择不将样式中的填充/边框和宽度/高度应用于相同的元素。

1. https://plus.google.com/103013777355236494008/posts/FqUEyyvT4RH
2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug