清除button按钮在IE6/IE7下的黑边

来自:互联网
时间:2018-08-13
阅读:

表单中的提交按钮button,在清理了其默认样式后,在IE6和IE7下仍然存在黑边,显得有点丑陋,不过总归是有办法的。比如,你的登录表单中有一个登录按钮,当登录按钮得到焦点,并且消失焦点后,登录按钮会有一个1px的黑色边框,这样直接影响了页面的效果,这样的bug将出现在下面两个元素上:

button按钮使用了【type=”submit”】会产生这样的bug;

input使用了【type=”submit”】也会产生这样的bug。

解决方案一:标签嵌套

要解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉。

解决方案二:IE滤镜

如果是IE浏览器,则过滤input元素中的黑色。

<!--[if IE]>
<style type="text/CSS">
input {
filter:chroma(color=#000000);
}
</style>
<![endif]-->

因为这个问题,存在所有按钮上,为了一劳永逸,建议在reset.css样式中加入:

input[type=submit],
input[type=reset],
input[type=button]{
filter:chroma(color=#000000);
}

IE的低版本并不支持属性选择器,建议给元素增加类别选择器。

返回顶部
顶部