1

我创建了<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 中修复它，使其看起来像它应该做的那样？

谢谢。

4

2 回答 2

3

你的 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 语法。试试这个。

    如果您需要支持 IE7 或 IE6，则需要同时指定 thefilter和-ms-filtersyntax 变体。对于仅 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));

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

于 2013-05-20T08:58:38.230 回答
1

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

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

我发现这些文章可能对

于 2013-05-20T08:17:46.387 回答