今天做一个tabs效果的时候，发现上面的button在低版本下会出现黑色的边框，很难看，于是我整理了下几个去掉黑色边框的办法：

1、在button的外层嵌套一个div，设置button的border:none;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.middle{
width: 98%;
height: 30px;
border-bottom: 1px solid #d4dbe1;
margin: 20px auto 10px;
}
.btn-border{
display: inline-block;
float: left;
width: 78px;
height: 29px;
border: 1px solid #d4dbe1;
border-bottom: none;
margin-right: 8px;
}
.middle button{
width: 78px;
height: 29px;
background: #f5f6f8;
border: none;
margin-left: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="middle">
<div class="btn-border">
<button><a href="#">tabs-1</a></button>
</div>
<div class="btn-border">
<button><a href="#">tabs-2</a></button>
</div>
<div class="btn-border">
<button><a href="#">tabs-3</a></button>
</div>
<div class="btn-border">
<button><a href="#">tabs-4</a></button>
</div>
</div>
</body>
</html>

2、如果是IE浏览器，则过滤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);

}

input[type='submit']input[type='button']button等按钮在低版本的IE下面，去掉黑色边框的问题的更多相关文章

  1. type="submit" 和type="button"

    今天,小菜鸟又遇到一个问题,当不小心在页面输入框回车一下,结果莫名的页面发出了一个请求. 把问题定位在一个button上,代码是这样写的<button class="btn btn-d ...

  2. :input 匹配所有 input, textarea, select 和 button 元素

    描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...

  3. 编写手机端自适应页面案例，springMVC代码，SpringMVC上传代码，去掉input框中原有的样式，使ios按钮没有圆角,css中的border-radius类似

    1.编写的页面 <%@ page language="java" contentType="text/html; charset=UTF-8"  page ...

  4. input type="submit" 和"button"有什么区别？

    http://www.zhihu.com/question/20839977 在一个页面上画一个按钮,有四种办法: <input type="button" /> 这就 ...

  5. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  6. <input type="button" /> 和<input type="submit" /> 的区别

    <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...

  7. input type="submit" 和"button"有什么区别

    HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型.点击触 ...

  8. form表单重复提交，type=“button”和type=“submit”区别

    公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...

  9. type="button"和type="submit"的区别

    type=＂button＂ ,＂submit＂ 的区别(转) Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能   type=s ...

随机推荐

  1. php连接oracle10数据库 转载

    本文转载自:http://blog.csdn.net/wzg199088/article/details/6678241 一.配置环境: 访问Oracle8以上的数据库需要用到Oracle8Call- ...

  2. 将UIImage保存成JPG或PNG格式存储在本地

    -(void)pngAndJpg:(UIImage*)image{ NSString *pngPath = [NSHomeDirectory() stringByAppendingPathCompon ...

  3. Spring REST实践之Spring Web MVC

    Spring概要 Spring Framework提供了依赖注入模型和面向切面编程,简化了基础型代码的编写工作以及更好的能够与其它框架和技术整合起来.Spring Framework由data acc ...

  4. Git版本管理：Windows下Git配置与使用指南

    简要介绍:Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理. 一.安装 软件:msysGit-fullinstall-1.8.1.2 打开之后设置安装路径,默认为 ...

  5. 网络虚拟化技术 TUN/TAP MACVLAN MACVTAP

    TUN 设备 TUN 设备是一种虚拟网络设备,通过此设备,程序可以方便得模拟网络行为.先来看看物理设备是如何工作的:

  6. X431 元征诊断枪

    X-431 Diagun是专门为汽车维修技师设计的诊断设备. 小巧的主机.强大的诊断功能.方便快捷的网上升级.一体化多功能接头,都是维修技师的首选.X-431 Diagun 是汽车维修技师的标准装备. ...

  7. 做什么都要坚持，写blog也一样，

    2015年一篇文章没写,惭愧,时间过的真快 好习惯要坚持,

  8. 栈上连续定义的int变量，地址相差12个字节

    在VS2010,进行调试的时候,发现连续定义的int变量,地址相差12个字节.这是为什么? 按照我们的理解,int占用4个字节,应该相差4个字节.这是因为VS2010在Debug模式下,int变量占用 ...

  9. jQuery进行DOM操作记录

    1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuer ...

  10. jquery禁用右键、文本选择功能、复制按键的实现

    同时适合IE.firefox.谷歌浏览器下适用,经过筛选代码如下 //禁用右键.文本选择功能.复制按键 $(document).bind(“contextmenu”,function(){return ...