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）規則，瀏覽器將只會選取他們理解的規則。

一個例子：

.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

圓角和過濾器不走在一起。對於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. 經由行爲
2. 添加邊界半徑照常包括PIE.htc（邊界半徑：10px的;）
3. 添加（-pie-background：linear-gradient（top，＃8cb2d1 0％，＃4080b3 42％）;）

Answer 4

這是一個非常堅固的工作臺回答IE9漸變vs角落問題。 它使用js快速生成SVG - 而且速度很快。

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

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 */ 
}