button在IE6/7下的黑边去除方案
我要评论好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)
在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，input[type="submit"]和button[type="submit"]存在的问题还不仅是这个，常见的有：button在IE67下的宽度兼容问题、button的行高问题（各浏览器下解析不一样）、button的outline问题，甚至submit在ios下也存在问题。这么多烦人的事，苦逼了前端人员。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框
问题
问题是这样的，你的登录表单中有一个登录按钮，当登录按钮得到焦点，并且消失焦点后，登录按钮会有一个1px的黑色边框，这样直接影响了页面的效果，但是这样的问题是怎么来的，我也不知道（希望有知道朋友能帮忙解释一下）。而且这样的bug将出现在下面两个元素上：
- button按钮使用了【type="submit"】会产生这样的bug;input使用了【type="submit"】也会产生这样的bug。
一起来看这个问题的截图：
解决方案
要解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和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下没有得到较好的支持，可以使用类名来代替，比如说“form-text”。
就是这么一句代码，把黑色边框去掉了。
顺便介绍一个IE6-7解决焦点点状线去除的技巧，我们有时候在ie6-7下使用
a:focus, *:focus {outline:none;}
无法除点状线，但有时候又需要去掉这样的点状线，那么有也有一个比较BT的解决方法，代码就一句：
a:focus, *:focus {
noFocusLine: expression(this.onFocus=this.blur());
}
看个对比图吧：
问题是解决了，但你要问我这个问题为什么会这样，又为什么这样能解决？说实话，我也不知道，我只想告诉大家的是，这么做能解决你需要解决的问题，希望对大家有所帮助。如果您知道怎么来的，记得告诉我哟。谢谢！
相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
最新评论