今天做一个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. POJ 2886Who Gets the Most Candies?（线段树）

    POJ 2886 题目大意是说有n个人围成一圈,游戏的起点是k,每个人持有一个数字(非编号)num,每次当前的人退出圈,下一个人是他左边的第num个(也就是说下一个退出的是k+num, k可以为负数, ...

  2. C#之数组

    什么是数组?数组是一种数据结构,包含同一个类型的多个元素.数组的声明:int[] myIntArray; 注:声明数组时,方括号 ([]) 必须跟在类型后面,而不是变量名后面.在 C# 中,将方括号放 ...

  3. 解决Android singleTask模式下PendingIntent不能给onNewIntent传值的Bug

    http://phenix.blogbus.com/logs/220656659.html 博主简直碉堡了, 我用PendingIntent给singleTask的顶层Activity传值一直收不到, ...

  4. fastcgi 分布式

    以lighttpd fastcgi写一下自己对fastcgi分布式的理解. 假设一台机器A上运行lighttpd,在这台主机上只是对请求进行分发. 而在其他多台机器上运行多个fastcgi进程,用来接 ...

  5. Mahout之Canopy Clustering深入理解

    转自:http://www.cnblogs.com/vivounicorn/archive/2011/09/23/2186483.html Mahout学习——Canopy Clustering 聚类 ...

  6. Castle IOC容器组件生命周期管理

    主要内容 1．生命处理方式 2．自定义生命处理方式 3．生命周期处理 一．生命处理方式 我们通常创建一个组件的实例使用new关键字,这样每次创建出来的都是一个新的实例,如果想要组件只有一个实例,我们会 ...

  7. JS判断是否为安卓orIOS

    var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...

  8. extjs 点击复选框在表格中增加相关信息行

    功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 va ...

  9. TMS3705A PCF7991AT 线路图

  10. DAG成员服务器还原

    DAG成员服务器 exmb02 已损坏: 1.使用 Get-MailboxDatabase cmdlet 为要恢复的服务器上的任何邮箱数据库副本检索所有重播延迟和截断延迟设置:   Get-Mailb ...