csslint - 破盒模型答案

【问题标题】：csslint - broken box modelcsslint - 破盒模型
【发布时间】：2011-10-10 05:23:26
【问题描述】：

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

考虑一下这个 CSS 代码：

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

CSSLint 说明如下： “破盒模型：使用带边框的高度。” “破盒模型：使用带边框的宽度。”

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

【问题讨论】：

标签： css csslint

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

CSSLint 警告您这一点，因为您可能没有意识到这一点，因此您的布局可能不符合预期。

如果您意识到这一点并在布局中考虑到了这一点，那么您可以取消选中 CSSLint 中的“小心损坏的盒子模型”复选框来取消此警告。

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

【讨论】：

哦，好的。我知道外部高度也包括边界。我只是认为“破盒模型”是不同的。无论如何，谢谢。
@dotweb - 旧的 IE 框模型（在 Quirks 模式的恐怖中仍然可用）计算了指定尺寸内的边框和填充。这实际上是 quirks 模式和standards 模式的主要区别。这就是人们通常所说的“破盒模型”的意思，但在 CSSLint 警告的上下文中，我认为他们是在使用这个短语来警告你，以防你认为盒子模型以这种方式工作，而不是说你的代码正在制作它以这种方式工作（事实并非如此）。

【解决方案3】：

我认为 CSSLint 试图在读者不必理解盒子模型的含义的情况下强制执行一组良好实践。归根结底，我完全理解盒子模型，并且理解您的 css 会产生 52px 的“实际”宽度/高度，这可能是为了防止误解。

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

【讨论】：