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


Posted in HTML / CSS onDecember 24, 2012

好久没有处理过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下的黑边去除方案

解决方案

要解决这样的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”。

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

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

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

复制代码
代码如下:

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

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

a:focus, *:focus {
noFocusLine: expression(this.onFocus=this.blur());
}

看个对比图吧:

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

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

HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 #HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 #HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 #HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 #HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 #HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 #HTML / CSS
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python实现定时提取实时日志程序
2018/06/22 Python
python简单操作excle的方法
2018/09/12 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
学生操行评语大全
2014/04/24 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
芙蓉镇观后感
2015/06/10 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS