手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >button在IE6/7下的黑边去除方案
button在IE6/7下的黑边去除方案
摘要:好久没有处理过IE6下的兼容问题了,今天有朋友碰到过input[type="submit"]和button[type="submit"]在I...

好久没有处理过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。

一起来看这个问题的截图:

button在IE6/7下的黑边去除方案1

解决方案

要解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉,相信不少同学是这样使用的,简单了事。但有的情况下我们是无法为这两个元素添加标签的,那么我们就需要别的方法来解决。

正常的解决方案是没了,只有使用滤镜来解决:

<>

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

input[type=submit],

input[type=reset],

input[type=button]{

filter:chroma(color=#000000);

}

属性选择器在IE下没有得到较好的支持,可以使用类名来代替,比如说“form-text”。

就是这么一句代码,把黑色边框去掉了。

button在IE6/7下的黑边去除方案2

顺便介绍一个IE6-7解决焦点点状线去除的技巧,我们有时候在ie6-7下使用

a:focus, *:focus {outline:none;}

无法除点状线,但有时候又需要去掉这样的点状线,那么有也有一个比较BT的解决方法,代码就一句:

a:focus, *:focus {

noFocusLine: expression(this.onFocus=this.blur());

}

看个对比图吧:

button在IE6/7下的黑边去除方案3

问题是解决了,但你要问我这个问题为什么会这样,又为什么这样能解决?说实话,我也不知道,我只想告诉大家的是,这么做能解决你需要解决的问题,希望对大家有所帮助。如果您知道怎么来的,记得告诉我哟。谢谢!

【button在IE6/7下的黑边去除方案】相关文章:

css中用javascript判断浏览器版本

CSS教程:CSS的Background Images背景图片

在IE6/7/8下识别html5标签(让老式浏览器识别html5)

css body背景图全屏不论分辨率大小

DIV边距属性在Chrome和IE中的区别

中文字体在CSS中的英文表达方式

Ext Grid控件的配置与方法

兼容IE6的图片圆角边框CSS

div+css垂直居中的五种实现方法

任意图片实现垂直居中的三种方法(兼容性还不错)

精品推荐
分类导航