0

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

这是我的小提琴。

IE9 中的结果看起来像， 在此处输入图像描述

但是，我遇到了边界半径样式的问题。我的代码有什么问题？有什么解决办法吗？

我在 IE9 圆角和过滤器上找到了类似的问题：progid:DXImageTransform.Microsoft.gradient答案为

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

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

2 回答 2

0

您可以在.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/

于 2013-10-30T13:22:28.040 回答
0

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

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

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

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

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

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

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

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

于 2013-10-30T13:35:26.693 回答