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]-->

头部标签中的这段代码从不起作用......为什么？我一直在网上搜索很多，每个人都说它有用......但是，实际上，在我的网页上没有。我已经使用了很多次并且它有效...但是我应该有错... 有人可以帮帮我吗？提前谢谢！

Answer 1

发布于this SO answer（我在评论中链接）：

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

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

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

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

你有这个：

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

非IE浏览器将其视为：

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

你需要这个：

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

这样开始和结束标记都是对非IE浏览器的完全包含注释，并且呈现样式。

Answer 2

Mystere Man的含义是，在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及以下版本不支持此属性，因此我不会为文本阴影提供备用 - 您的用户可以在没有它的情况下生活。

提供浏览器无法理解的标准CSS属性是没有害处的，它只会被浏览器忽略，只能在理解它的浏览器中使用。请参阅more about CSS fallback properties。

如果您必须使用条件评论来解决此问题，您可以查看针对那些您知道不支持RGBa的Internet Explorer版本（不要惩罚互联网用户） 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渐变。对于某些人来说，在IE中，alpha值不能很好地呈现，它会导致完全不同的风格。 Changin在字体颜色中的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

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

4 个答案: