Question

我已经提到许多网站将线性渐变应用于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中正常工作。

Answer 1

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

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

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

但是，重要的是要注意这些filter渐变（实际上是IE的filter样式）有一些错误和怪癖，其中一些可能使它们难以使用

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

使用滤镜渐变无法解决此问题。

因此，如果你需要在IE9中的同一元素上使用渐变背景和圆角，最好的解决方案是使用填充脚本，例如CSS3Pie，它在IE9中实现标准的CSS渐变，并在一种与border-radius兼容的方式。

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

希望有所帮助。

IE-9浏览器是否支持线性渐变

1 个答案: