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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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在各种web服务器的运行模式详解
2013/06/03 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
Angular的$http与$location
2016/12/26 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue实现图片上传功能
2020/05/28 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python logging通过json文件配置的步骤
2020/04/27 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
请解释virtual关键字的含义
2015/06/17 面试题
转党组织关系介绍信
2014/01/08 职场文书
黄河象教学反思
2014/02/10 职场文书
学生保证书范文
2014/04/28 职场文书
工作岗位说明书模板
2014/05/09 职场文书
个人安全生产责任书
2014/07/28 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
预备党员介绍人意见
2015/06/01 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
redis lua限流算法实现示例
2022/07/15 Redis