表单中的提交按钮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的低版本并不支持属性选择器,建议给元素增加类别选择器。