Question

我正在使用filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0 );代码在IE9中设置渐变背景图片。

这是我的fiddle。

IE9的结果看起来像， enter image description here

但是，我遇到了 border-radius 样式的问题。我的代码有什么问题？对此有什么解决方案吗？

我发现了类似的问题 IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient回答

添加特定于浏览器的类或将svg数据设置为背景图像。

我不喜欢使用不同的css文件或根据浏览器版本添加不同的HTMLElement。
当我使用svg数据作为背景图像时，它可能会影响页面的性能。

Answer 1

您可以在.gradient_style内添加另一个元素，该元素将设置background-image和filter。然后在父元素上设置overflow: hidden，你应该很好。

示例CSS：

.gradient_style {
    background: transparent;
    height: 50px;
    width: 150px;
    border-radius: 25px;
    border: 1px solid #050DFA;
    overflow: hidden;
}

.gradient_style div {
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00A3EF', GradientType=0);
    width: 100%;
    height: 100%;
}

和HTML：

<div class="gradient_style"><div></div></div>

工作样本：http://jsfiddle.net/DymK5/2/

Answer 2

这是IE9中的已知错误，其中使用filter样式的背景渐变忽略border-radius并始终将渐变渲染到元素的角落。

不幸的是，IE9没有实现标准的CSS渐变语法，这使得这种事情变得必要。

有一些解决方案，但它们都有点难看。

最着名的解决方法是使用SVG数据URL作为渐变，仅适用于IE9。这个问题是你仍然需要filter支持IE8，当然IE10 / 11确实使用标准的CSS渐变，所以你需要开始使用条件样式表来根据浏览器版本设置样式。它很快变得丑陋。

我不会太担心这个的表现;应该没问题。管理代码比使用perf更多的问题。（在任何情况下，即使存在性能问题，它也只会影响所涉及的特定浏览器版本，IE9，因此它只占您受众的一小部分）

另一种选择是使用CSS3Pie polyfill脚本。这是一个很好的选择，因为它允许您在所有IE版本中为渐变使用标准CSS代码。既然你说你不喜欢在不同的浏览器版本中使用不同的CSS，那么这是一个很大的优点。

缺点是它是基于Javascript的，因此可能会影响性能。但是说，我从来没有看到它有任何性能问题，只要你没有过度使用它（即在同一页面上使用它为数百个元素）。

如果所有其他方法都失败了，我想总有一种选择就是不支持旧IE版本的渐变，并且有一个简单的纯色背景回退。

background-image仅在IE9中无法正确呈现

2 个答案: