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

【问题标题】：background-image is not properly rendering only in IE9background-image 仅在 IE9 中无法正确呈现
【发布时间】：2013-10-30 12:48:08
【问题描述】：

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

这是我的fiddle。

IE9 中的结果看起来像，

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

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

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

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

【问题讨论】：

一旁；您使用的方法在 IE9 中已弃用（来源：msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx）
一种简单的跨浏览器方法是将背景渐变创建为 1px 宽的图像并将其设置为重复的背景图像。
使用 SVG 作为背景图像不会对性能产生明显影响。使用 Microsoft SVG 渐变生成器ie.microsoft.com/TESTDRIVE/Graphics/SVGGradientBackgroundMaker/…，它将适用于所有现代浏览器。

标签： html css internet-explorer svg

【解决方案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/

【讨论】：

【解决方案2】：

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

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

有一些变通方法，但它们都有点难看。

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

我不会太担心它的性能；应该没问题。问题更多在于管理代码而不是性能。（而且无论如何，即使存在性能问题，也只会影响所涉及的特定浏览器版本，IE9，因此它只会占您受众的一小部分）

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

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

如果一切都失败了，我想总是可以选择不支持旧 IE 版本的渐变，并使用纯色背景后备。

【讨论】：