internet-explorer - 使用条件 CSS 向 IE 显示渐变图像

Question

我以前从未使用过条件语句(但我知道我最终不得不——我讨厌你 IE)。基本上，我使用 css 渐变在我网站的顶部有一个横幅:

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

所以我添加了一个条件语句来加载我在 GIMP 中为所有版本的 IE 准备的渐变图像:

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

我的计算机 (linux) 上没有 IE，所以我使用 Adob​​e Browser Labs 来测试我的网站在 IE 中的外观。但是，图像仍然无法加载。我的 css 的最终版本如下所示:

background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);
background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, #2B7BB8),
    color-stop(0.72, #4394CE),
    color-stop(0.86, #58A8E1)
);

<!--[if IE]> background-image:url('img/ieback.png'); <![endif]-->
<!--[if IE]> background-repeat:repeat-x; <![endif]-->

我做错了什么吗？

Answer 1

http://www.quirksmode.org/css/condcom.html

看来您不能在 CSS 文件中进行条件注释，只能在 HTML 文件中进行。

因此，如果您将样式元素包装在 <!--[if IE]> <![endif]--> 中它应该工作

查了一下，CSS3渐变只在IE10中支持，条件注释在IE10中已经被移除。因此，您可以使用该条件注释来定位所有版本的 IE。