*width IE-hack 导致的验证错误答案

【问题标题】：Validation errors due to *width IE-hack*width IE-hack 导致的验证错误
【发布时间】：2013-02-04 19:22:27
【问题描述】：

我正在使用这个工具来验证 CSS 文件：http://jigsaw.w3.org/css-validator/

我的 CSS 文件中有 23 个错误，其中一半以上看起来像这样：

Line 46  #left_navigation    Parse Error ;*width: 175px;

实际的 CSS 如下所示：

#left_navigation {
    float: left;
    width: 165px;
    *width: 175px;
    margin:0px;
    padding:12px 5px 5px 5px;
}

错误是由于星号设置了宽度。本来我没有放这里，但是很明显它需要处理IE中的一些显示问题。

所以我的问题是：我关心这些错误吗？有没有另一种/更好的方法来做到这一点？我不能直接取消它，因为当我们这样做时，IE 中会发生坏事。

【问题讨论】：

您可以将特定于 IE 错误的代码拆分为单独的 CSS，然后通过条件 cmets、元素上的 '.ie' 类或类似的方式将其仅应用于 IE .

标签： css w3c-validation

【解决方案1】：

我关心这些错误吗？

我不确定。你呢？

不过还有一个选择。确保您的网页包含以下内容：

<!--[if lt IE 7 ]> <html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->

然后，您可以使用带有自定义选择器的 IEx 特定样式，如下所示：

.ie7 #left_navigation { width: 175px; }

不再需要*prop: value; hack。

作为上述方法的替代方案，您还可以使用 IE 条件来包含单独/附加或替代的 IE 样式表。

【讨论】：

【解决方案2】：

任何浏览器都可以正常工作。如果出于某种原因验证 CSS 不是很重要，请忽略它。

很难的解决方案是让它在所有浏览器上都能正常工作。根据所需的向后兼容性，这可能会很困难。

还有类似 (Modernizr)[http://modernizr.com/] 之类的东西可以帮助您完成任务，例如：

#left_navigation.ie{
/* IE specific code */
}

Jeoren 发布了现成的解决方案:)

【讨论】：

【解决方案3】：

如果你想要一个有效的 CSS hack，以下允许您包含一个解决方案，而无需包含整个modernizr 脚本或通过添加 IE 条件 cmets 来更改 HTML（预）标题：

* html #left_navigation { width: 175px; } 用于 IE4-6 和

*+html #left_navigation { width: 175px; } 用于 IE7

见http://en.wikipedia.org/wiki/CSS_filter#Star_hack

【讨论】：

你说这会出现在页面的什么地方？在 html 中的某处，而不是 CSS 文件？
直接进入您的 CSS，在您的 #left_navigation 选择器下 - 这些是 CSS 规则。