仅在 IE<7 中使用条件注释评估 css 表达式？答案

【问题标题】：Evaluate a css expression only in IE<7 w/out using conditional comments?仅在 IE<7 中使用条件注释评估 css 表达式？
【发布时间】：2010-09-19 20:24:57
【问题描述】：

我已经知道：“不要使用 css 表达式！”我的问题不在于我是否应该使用表达式或是否有替代方法；我的问题很简单：我能否在不使用条件 cmets 的情况下仅在 IE 版本 7 之前的版本中评估 css 表达式？

我偶尔会使用下划线技巧来隐藏 IE7 的规则，但 IE7 似乎无论如何都会评估表达式。例如，_width:700px; 会被 IE7 忽略，但 _width:expression('700px'); 仍会被计算。

我知道有人会试图告诉我只使用条件注释来包含规则，但我正在寻找一种方法来做到这一点，而无需将单个样式规则放入单独的文件中。

给那些仍然不想放手的人的注意事项：我选择了使用 css 表达式，但我没有轻率地这样做。我理解其中的含义，并且我使用的表达式只计算一次。别再担心我的错误决定了，只要回答这个问题...... ;-)

【问题讨论】：

既然你一直在期待它......表达式是一个坏主意，依赖解析错误更糟糕。也就是说，从 navigator.appVersion 中解析版本并将其存储在某处，然后在您的表达式中检查它。愿上帝怜悯你的灵魂……

标签： html css internet-explorer

【解决方案1】：

我总是使用星号“hack”来专门针对 IE6，但它确实要求您的浏览器处于标准兼容模式（见下文）。

/* IE6 only */   
* html .myClass {
    width: 500px;
}

我喜欢它，因为它不依赖于解析浏览器中的不一致，并且根据W3C 进行验证。

至于处于标准兼容模式，您应该始终向您的页面添加有效的 DOCTYPE，因为它可以减少 CSS 错误和浏览器特性。有关 quirksmode 和标准兼容模式的说明，请查看此article。

您可以使用下面的示例在每个浏览器中使用表达式。我在 FF、IE6 和 IE7 中对其进行了测试，并按预期工作。我只希望 SO 有语法高亮来识别 CSS 表达式并将它们标记为红色，这样你就可以被提醒它们是邪恶的。我可能会问你为什么首先决定使用 CSS 表达式？很多人尝试使用它们在 IE6 中实现最小宽度，但这不是正确的解决方案。如果这是您要解决的问题，我已经写了 an answer in a separate question，演示了 IE6 中 min-width 的有效 CSS 解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">

        .ie6 {
            display: none;
        }

        * html .ie6 {
            display: expression("block");
        }

        * html .ie7 {
            display: expression("none");
        }

    </style>
</head>
<body>
<div class="ie6">
    This is IE6
</div>
<div class="ie7">
    This is Firefox or IE7+
</div>
</body>
</html>

【讨论】：

完美运行，谢谢。我正在使用表达式在元素上实现最大高度。如果您有最大高度的解决方案，我很乐意看到它！我之前也发过一个最小宽度的解决方案：stackoverflow.com/questions/93274/min-width-in-msie-6#93530
对不起，我不知道我头顶上的最大高度技术。我试图在一个表格中实现它一次并因为 IE 而放弃了。至于你的最小宽度解决方案，我实际上回应了一段时间：stackoverflow.com/questions/93274/min-width-in-msie-6#231174

【解决方案2】：

您不必使用条件 cmets 添加新文件。您可以轻松添加条件注释以将类添加到body 标记，如下所示：

<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gt IE 7]>-->
<body>
<!--<![endif]-->

然后在您的 CSS 中，您可以简单地在任何您喜欢的元素上为 IE7 定义不同的样式：

#content {
    width:720px;
}

.ie7 #content {
    width:700px;
}

您仍然加载相同的样式表，但您可以根据浏览器设置元素的样式。

您甚至可以将此扩展为 IE6、7 和非 IE 浏览器的不同样式。

【讨论】：

【解决方案3】：

你可以试试Rafael Lima's CSS Selector。它使用 Javascript，但您可以执行以下操作：

.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}

【讨论】：

我宁愿避免添加附加文件，但如果我找不到其他解决方案，我可能仍会在添加脚本之前采用条件注释路线。感谢您的意见。

【解决方案4】：

我曾经使用 !important 让非 ie 浏览器使用不同的样式，但后来 IE7 开始支持它。我发现 IE7 将应用标记为 !ie-only 的样式（或任何不属于 !important 的样式），而其他浏览器将忽略该样式，因为它们无法识别。

如果您需要三种不同的样式，这可能会起作用，但如果您想遵守标准，那就不是很好了。 （通常我不会尝试混合使用 !important 和 !ie-only ，而只使用 !ie-only。）

#myDiv {
  height: 3.0em !important; /* non-ie */
  height: 2.6em !ie-only; /* ie7 */
  height: 2.4em; /* ie < 7 */
}

【讨论】：

这是一个我从未见过的非常有趣的 hack。经过多一点挖掘后，我在网上发现了几次提到这一点，但我仍然无法让它工作......也许是因为我正在使用多个IE？不过，我一定会把它放在我的工具包中以供将来参考。

【解决方案5】：

这个答案可能是您正在寻找的： In-line CSS IE hack

【讨论】：

不。我已经尝试过下划线黑客并且没有任何运气。克拉（或几乎任何其他符号，星号是最常见的）针对所有版本的 IE，对我没有任何好处。