IE9圆角& CSS背景渐变？ [英] IE9 Rounded Corners & CSS Background Gradients Living Together?

问题描述

我在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（
中心底部，
＃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]  - > 
  

这带来了我的角落，但渐变消失了。

解决方案

渐变将在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/

I came across a weird thing in IE9 trying to get a background gradient to display.

Basically I'm applying multiple classes to a container object.

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

Using this 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;
}

To get the gradient in IE, I apply the filter garbage to my .gradient class.

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

With that, the gradient works but my rounded corners go away.

So I tried putting in a conditional for the filter declaration.

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

That brings back my corners but the gradient goes away.

解决方案

Gradient will go out for rounded corners in IE9, so the best solution for now to add one extra div:

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

and hide overflow for .corners

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

overflow: hidden;
}

I recomend this Photoshop-like tool for creating cross-browser gradients: http://www.colorzilla.com/gradient-editor/

And this one to create border-radius: http://border-radius.com/

这篇关于IE9圆角& CSS背景渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！