Question

我创建了<hr>标记，但它在Internet Explorer中无法正常显示。这是CSS：

hr {
    clear: both;
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}

这是jsfiddle http://jsfiddle.net/NC6ya/。我怎样才能在IE中修复它，看起来像是在做什么？

感谢。

Answer 1

你在jsfiddle确实在IE10中完美运行。它在IE9或更早版本中不起作用，因为那些版本的IE不支持CSS渐变。

您可以使用以下几种解决方案：

使用诸如CSS3Pie之类的polyfill脚本将CSS渐变的支持添加到旧的IE版本。正如我所说，CSS3Pie可能是最好的脚本，因为它可以无缝地工作，适用于从IE6到IE9的所有IE版本。
使用IE专有的-ms-filter样式。
```
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')";
```
它并不漂亮，但是它完成了工作（虽然有一些已知的错误）。注意以上只是从别处复制的一个例子;你需要调整它以满足你的要求。有许多渐变生成器工具可以帮助您获得正确的IE语法。例如，尝试this one。

如果您需要支持IE7或IE6，则需要同时指定filter和-ms-filter语法变体。对于IE8 / IE9支持，您只需要-ms-filter语法。

就个人而言，我更喜欢上面的polyfill选项而不是过滤器，因为它更整洁 - 你使用标准的CSS代码 - 而且因为它避免了过滤器风格中最好的几个怪癖避免。
当然，最后的选择只是让旧的IE版本没有渐变。为他们提供合适的坚实背景作为后备，并忘记它。在可能的情况下支持旧的IE用户总是很好，但如果它不会对网站的可用性产生明显的影响，那么有时候不值得付出努力。这应根据具体情况决定;有时最好给予支持，有时则不支持。由您来决定具体案例。

希望有所帮助。

最后，我建议另外一件事是添加另一个CSS行，其中包含渐变样式的无前缀版本：

background-image: linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));

如果你要指定前缀样式，你也应该总是指定等效的前缀版本，因为一旦浏览器支持该标准，它们通常会删除对前缀版本的支持，这意味着如果你没有指定标准，它可以在未来版本中破坏您的代码。不好。

Answer 2

我认为问题与IE识别的css属性有关。如果将以下内容添加到css中，则应该看到渐变效果，尽管与示例不同。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 )

我发现了这些可能有用的文章

风格化的HR在IE中没有正确显示

2 个答案: