IE9中的渐变+圆角CSS问题

在我当前的项目中，我在CSS文件中使用了CSS3渐变。为了支持IE浏览器，我也使用了过滤器属性。以下是我的代码：IE9中的渐变+圆角CSS问题

.card.active .content.back { 
    background: #333; /* Old browsers */ 
    background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */ 

}

但是，当我在上面的代码中使用filter属性，该属性border-radius不工作。如果有人知道这个问题的解决方法，请与我分享。

感谢

来源

2012-05-17 Mujahid

您可以使用PIE.htc为你想要的结果。

PIE代表Progressive Internet Explorer。它是一种IE附加行为，当应用于元素时，它允许IE识别并显示一些CSS3属性。

PIE目前通过8将全部或部分支持IE 6以下CSS3功能：

border-radius 
box-shadow 
border-image 
multiple background images 
linear-gradient as background image

此外，PIE增加了对边界图像和线性梯度到IE 9，其已经支持支持其他功能本身。

http://css3pie.com/

或看演示： - http://jsfiddle.net/ZxzSs/1/

支持PIE.htc你必须保持PIE.htc文件，您的根文件夹不是将工作为您的网站....

来源

2012-05-17 06:48:49

嗨@Shailender：我已经使用CSS3Pie，但问题是，当我用'过滤器'属性，div区没有得到IE9中的border-radius属性。虽然感谢您的回答，但您知道一种方法来为容器使用边界半径来使用过滤器来获取渐变背景谢谢 – Mujahid

@Mujahid如果您使用CSS3PIE，因此您不需要使用任何类型的过滤器因为通过PIE.htc你可以实现所有的结果，如： - 边界 - 半径，盒子阴影和梯度在IE浏览器及其支持，直到IE6到IE9 .....为什么你使用过滤器属性，如果你有其他解决方案？ –

@Shailendar：其实前面的开发人员使用的过滤器属性，我不知道他为什么这样做。当我将鼠标悬停在网页上时，我遇到了一个问题，使用'filter'属性背景的容器变为白色。所以我删除了'filter'属性并使用了PIE.htc并解决了问题。但在我的申请中，div区域被改变了-8度。当我使用PIE。htc，转换度获得变化 – Mujahid

你应该能够梯度应用到元素的孩子与圆角。我没有访问IE9我家的机器上，但是这应该工作：

.element { 
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */ 
    border-radius: 10px; 
} 
.element .ie-helper { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0); 
}

HTML：

<div class="element"> 
    <!--[if lt IE 9]><div class="ie-helper"><![endif]--> 
    <p>Your content with gradient and rounded corners...</p> 
    <!--[if lt IE 9]></div><![endif]--> 
</div>

如果页面中查看在IE10 +或其他浏览器，无论是渐变和圆角将应用于相同的元素（假设您从代码示例中恢复供应商特定的前缀）。由于使用了conditional comments，内部div.ie-helper将仅在IE9及更低版本上呈现。

这是不理想，但会完成这项工作，但因为你是如此广泛的浏览器后要全力支持，这是一个合理的解决办法

来源

2012-05-17 06:48:22

IE9中的渐变+圆角CSS问题

回答

相关问题