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 相关文章推荐
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5 body设置自适应全屏
May 07 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 注释规范
2012/03/29 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
JS正则表达式常见用法实例详解
2018/06/19 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python字符串中的单双引
2017/02/16 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python实现微信表情包炸群功能
2021/01/28 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
2014年迎新年活动方案
2014/02/19 职场文书
会计专业导师推荐信
2014/03/08 职场文书
入党介绍人评语
2014/05/06 职场文书
工厂标语大全
2014/10/06 职场文书
感谢信模板大全
2015/01/23 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript