IE9 圆角和圆角CSS 背景渐变共存？

Question

我在 IE9 中遇到了一个奇怪的事情，试图显示背景渐变。

基本上我将多个类应用于一个容器对象。

<div class="gradient corners"></div>

使用这个CSS。

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

为了在 IE 中获得渐变，我将过滤器垃圾应用到我的 .gradient 类中。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

这样，渐变就起作用了，但我的圆角消失了。

所以我尝试为过滤器声明添加一个条件。

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

这使我的角落恢复，但梯度消失了。

Answer 1

在 IE9 中，圆角的渐变效果会消失，因此目前最好的解决方案是添加一个额外的 div：

 <div class="corners"><div class="gradient"></div></div>

并隐藏 .corners 的溢出。

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

我推荐这个类似 Photoshop 的工具来创建跨浏览器渐变： http://www.colorzilla.com/gradient-editor/

这一个创建边框半径：
http://border-radius.com/

Answer 2

您不需要 if IE 块。

只需将所有 3 个（如果包含两个 IE，则为 4 个）规则放入样式声明中，浏览器将只选择它们理解的规则。

一个例子：

.gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

还应该注意的是，IE 中的渐变仅在元素 hasLayout 时才起作用（请参阅：http://reference.sitepoint.com/css/haslayout）

Answer 3

这是解决 IE9 渐变与角问题的一个非常可靠的解决方法。
它使用 js 动态生成 SVG - 而且速度很快。

http://abouthalf.com/2011/10/ 04/updated-ie9-gradients-with-rounded-corners/

Answer 4

圆角和滤镜不相配。对于 IE，我总是包含 http://css3pie.com 并使用它在 IE 中执行边框半径和渐变。示例 css 如下所示：

.someElement {
    behavior: url(assets/js/PIE.htc);
    border-radius: 10px;
    background: #8cb2d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #8cb2d1 0%, #4080b3 42%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3));
    background: -webkit-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -o-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -ms-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);
}

步骤：

1. 通过行为包含 PIE.htc
2. 像平常一样添加边框半径 (border-radius: 10px;)
3. 添加特殊的 -pie-background 属性： (-pie-background: Linear-gradient(top, #8cb2d1 0%,#4080b3 42%);)

Answer 5

只需使用包装 div（圆角和溢出隐藏）来剪辑 IE9 的半径。简单，跨浏览器工作。 SVG 或 JS 是不必要的。

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}