html – IE9圆角和CSS背景渐变生活在一起?

我在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]-->

这带回了我的角落,但渐渐消失。

解决方法

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

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些