我在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/
原文地址:https://www.jb51.cc/html/232654.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。