时间:2014-01-29所属栏目: Html+css 来源: 热度:
最近喜欢使用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');
}