条件注释不适用于 Internet Explorer 以外的浏览器

Question

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<![endif]-->

head 标签中的这段代码永远不会运行...为什么？我一直在互联网上搜索很多，每个人都说它有效......但实际上，在我的网页中没有。我已经使用了很多次并且它有效......但是我应该错了...... 任何人都可以帮助我，好吗？ 提前致谢！

Answer 1

正如this SO answer 中发布的（我在 cmets 中链接到的）：

IE 以外的浏览器将条件语句视为 cmets，因为它们包含在注释标签内。

<!--[if IE]>
Non-IE browsers ignore this
<![endif]-->

但是，当您的目标浏览器不是 IE 时，您必须使用 2 个 cmets，一个在代码之前，一个在代码之后。 IE 会忽略它们之间的代码，而其他浏览器会将其视为普通代码。因此，针对非 IE 浏览器的语法是：

<!--[if !IE]-->
IE ignores this
<!--[endif]-->

你有这个：

<!--[if !IE]>
some stuff
<![endif]-->

哪些非 IE 浏览器会这样看：

（什么都没有，因为它只是对非IE浏览器的评论）。

你需要这个：

<!--[if !IE]-->
some stuff
<!--[endif]-->

这样开始标签和结束标签对于非 IE 浏览器都是完全包含的 cmets，并呈现样式。

Answer 2

Mystere Man 的意思是，这些条件 cmets仅在 Internet Explorer 10 之前的 Internet Explorer 版本中受支持。既然您说“应用这些样式，如果它不 Internet Explorer”，你在逻辑上是不可能的。

我个人会写如下-

  <style type="text/css" media="screen">
        .title {
            color: #000000;
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
  </style>

您会注意到标题类的额外“颜色”属性 - 这将在支持 RGBA 的浏览器中被覆盖（它将使用该值代替），但对于那些不支持它的浏览器将是一个备用值。这样，所有不支持 RGBA 的浏览器（例如 Firefox 2 及更低版本）也将具有可用的备用颜色。由于 Internet Explorer 8 及更低版本也不支持此属性，因此我没有费心为 text-shadow 提供回退 - 您的用户可以在没有它的情况下生存。

提供一个浏览器不理解的标准 CSS 属性并没有什么坏处，它只会被浏览器忽略，并且只在能够理解它的浏览器中使用。见more about CSS fallback properties。

如果您必须使用条件 cmets 来解决这个问题，您可以考虑针对那些您知道 不支持 RGBa 的 Internet Explorer 版本（不要惩罚 Internet 用户Explorer 9 - 11，其浏览器 do support the property)。

<!--[if lte IE 8]>
<style type="text/css" media="screen">
        .title {
            color: #000000;
        }
</style>
<![endif]-->

如果后备属性是更好的解决方案，请不要这样做，例如这种情况。

Answer 3

我会回答自己，因为我发现了问题，这与 IE 选择器标记本身和 rgba 属性都没有任何关系（正如之前有人所说：IE 10 支持最后一个），但应用了 alpha 渐变。出于某种原因，alpha 值在 IE 中渲染得不是很好，它导致了完全不同的风格。更改字体颜色中的 0（alpha 值）并稍微使用这些颜色值可能会在 IE 和其他浏览器中获得非常相似的结果。 所以，非常感谢所有试图帮助我的人。我希望这可以帮助另一个人。 :)

Answer 4

你错过了[endif]：

<!--[if !IE]>
    <style type="text/css" media="screen">
        .title {
            color: rgba(0, 0, 0, 0);
            display: block;
            font-family: sans-serif;
            font-size: 50px;
            margin-left: 0px;
            margin-right: 5px;
            text-align: right;
            text-shadow: rgba(255, 255, 255, 0.247059) 2px 2px 2px, #888 0px 0px 0px;
        }
    </style>
<!--[endif]-->

注意：这将在非 IE 浏览器上应用该样式。如果要在IE浏览器上使用，请将!IE改为IE