我在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]-->
带回我的角落,但渐变消失了。
答案 0 :(得分:25)
渐变将在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/
这个创建border-radius: http://border-radius.com/
答案 1 :(得分: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)
答案 2 :(得分:2)
对于IE9渐变与角落问题,这是一个非常可靠的解决方法。 它使用js动态生成SVG - 而且速度很快。
http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/
答案 3 :(得分:1)
圆角和滤镜不能放在一起。对于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%);
}
步骤:
答案 4 :(得分:1)
只需使用包装器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 */
}