小虾虎鱼

小虾虎鱼

IE中a标签使用滤镜渐变的问题

作者 禾惠 发表于 2013/02/26,最后修改于 2013/02/26

最近喜欢使用CSS3来制作按钮,而由于低版本的IE浏览器不支持CSS3,所以不得不使用IE专用的滤镜了,按钮的样式如下:

a.blue{display:inline-block; border-radius:3px; border:1px solid #3680b9; padding:0 10px; line-height:24px; text-decoration:none; font-size:12px; color:#e0ebf3;
    background:-webkit-gradient(linear,0 0,0 100%,from(#4C92C8 ),to(#3680b9));
    background:-moz-linear-gradient(top,#4C92C8,#3680b9);
    background:-ms-linear-gradient(top,#4C92C8,#3680b9);
    background:-o-linear-gradient(top,#4C92C8,#3680b9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4C92C8', endColorstr='#3680b9', GradientType='0');
}
a.blue:hover{border-color:#3c87c1; color:#fff;
    background:-webkit-gradient(linear,0 0,0 100%,from(#61a6da),to(#438dc6));
    background:-moz-linear-gradient(top,#61a6da,#438dc6);
    background:-ms-linear-gradient(top,#61a6da,#438dc6);
    background:-o-linear-gradient(top,#61a6da,#438dc6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61a6da', endColorstr='#438dc6', GradientType='0');
}

在使用的过程中,无意发现在IE9及IE9以下的版本中,遇到类似于  http://www.xiaoboy.com/detail/1341545029.html  文章的情况,就是只有鼠标经过按钮(使用的是a标签)中的文字时,按钮的背景才会发生变化(此时鼠标才会呈手型状态)。


经过排除测试发现,是由于IE的滤镜才导致这样的情况,最后得到一个解决方法:给a标签再添加一个background属性,可随便添加一个背景色或者背景图片即可。代码如下:

a.blue{display:inline-block; border-radius:3px; border:1px solid #3680b9; padding:0 10px; line-height:24px; text-decoration:none; font-size:12px; color:#e0ebf3;
    background:#fff;/*此处可设置背景色或者背景图片,且必须在其他的background之前*/
    background:-webkit-gradient(linear,0 0,0 100%,from(#4C92C8 ),to(#3680b9));
    background:-moz-linear-gradient(top,#4C92C8,#3680b9);
    background:-ms-linear-gradient(top,#4C92C8,#3680b9);
    background:-o-linear-gradient(top,#4C92C8,#3680b9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4C92C8', endColorstr='#3680b9', GradientType='0');
}
a.blue:hover{border-color:#3c87c1; color:#fff;
    background:-webkit-gradient(linear,0 0,0 100%,from(#61a6da),to(#438dc6));
    background:-moz-linear-gradient(top,#61a6da,#438dc6);
    background:-ms-linear-gradient(top,#61a6da,#438dc6);
    background:-o-linear-gradient(top,#61a6da,#438dc6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61a6da', endColorstr='#438dc6', GradientType='0');
}