-2

我已经参考了许多将线性渐变应用于 ie-9 的网站，并且一些链接说不支持以及一些链接说它会起作用。任何人都可以明确我们是否可以使用线性渐变？

这是我的代码：

.top_block
{
        position: fixed;
    display: block;
    height: 150px;
    width: 105px;
    z-index: 9999;
    background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D3D3D3));
    background: -moz-linear-gradient(top, #E9E9E9, #D3D3D3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#D3D3D3',GradientType=0 ); 
    margin-left:72px;
    left: 36%;
    top: 32%;
    border: 6px solid white;
    border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    padding: 15px;
}

我已经应用了这个不能在 ie-9 中工作以及在 Firefox 和 chrome 中工作正常。

4

1 回答 1

4

不，IE9 不支持标准的 CSS 渐变。这仅在 IE10 中引入。

但是，IE9 确实支持旧的 IE 特定-ms-filter样式，就像旧 IE 版本一样，因此您可以使用它在 IE9 中生成渐变。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#222222', EndColorStr='#AAAAAA')";

然而，重要的是要注意这些filter渐变（实际上filter是一般的 IE 样式）有许多错误和怪癖，其中一些会使它们难以使用。

例如，它们与 CSS 不兼容border-radius。如果您border-radius在同一元素上使用滤镜渐变，渐变背景将显示在圆角的顶部并隐藏它们。

使用过滤器梯度无法解决这个问题。

所以如果你需要在 IE9 中的同一个元素上使用渐变背景和圆角，最好的解决方案是使用诸如CSS3Pie 之类的 polyfill 脚本，它在 IE9 中实现了标准 CSS 渐变，并且以兼容border-radius.

这不是您在使用filter样式时会遇到的唯一问题，因此我的偏好是尽可能避免使用它们。像 CSS3Pie 这样的 Polyfill 脚本通常会使事情变得更容易使用，并且通常可以很好地解决或避免fiter样式中的错误。

希望有帮助。

于 2013-05-29T12:40:31.797 回答