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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
MySQL最常见的操作语句小结
2015/05/07 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
教学器材管理制度
2014/01/26 职场文书
反对邪教标语
2014/06/30 职场文书
安全第一课观后感
2015/06/18 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Python开发简易五子棋小游戏
2022/05/02 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python