在 CSSLint 中完全忽略 star hack？答案

【问题标题】：Ignore star hack completely in CSSLint?在 CSSLint 中完全忽略 star hack？
【发布时间】：2014-09-30 13:44:02
【问题描述】：

我有这样的 CSS：

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100px;
}

当我通过运行 CSSLint 时

csslint --ignore=star-property-hack test.css

它仍然显示此错误：

width can't be used with display: inline.
    width: 100px;

有什么解决办法吗？

【问题讨论】：

尝试和 lint 显然需要迎合旧版浏览器的代码通常不是一个好主意，因此无法根据“良好”的编码标准编写和维护。为什么你甚至需要display: -moz-inline-stack？我了解是否有用户仍在使用 IE6，但谁不再使用 Firefox 1.x 或 2？
您可以将任何 hack 放在单独的样式表中，从而使它们远离测试。如前所述，如果有的话，您只需要它们用于 IE，因此您可以通过 CC 将它们分配给需要的 IE。（天哪，我已经好多年没有为此烦恼了。）

【解决方案1】：

没错...当显示为内联时，宽度没有意义。为什么要将 display 设置为 inline 而不是 inline-block？

尽管如此，尝试使用相同的选择器将星属性设置为另一种样式：

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 100px;
}

.inline-block {
    *display: inline;
}

【讨论】：

*display:inline 是 IE 的一个 hack，我从以下地址开始：blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block
我知道。我提供的解决方案对您有用吗？有效的 css 仍然是一样的，csslint 也不会抱怨......

【解决方案2】：

仅在需要支持 IE6（IE7 及更高版本理解 display: inline-block 没有问题）时才需要显示：内联故障转移。我会推荐以下内容：

如果需要支持IE6：

将 hack 分离成 conditional stylesheet，仅适用于 IE6：

在您的主样式表中：

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

在 ie6.css 中：

.inline-block {
    display: inline;
    zoom: 1;
}

只需使用代码：

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    width: 100px;
}

要快乐。

【讨论】：