今天做一个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. WIN7建立wifi热点及无法启动承载网络的解决办法

    1,根据网络共享的方法,最简单莫过于利用Win7的虚拟网卡来做热点,而不用借助其他软件.         首先,用管理员身份打开CMD命令提示符,输入 netsh wlan set hostednet ...

  2. Excel数据通过plsql导入到Oracle

    Excel数据通过plsql导入到Oracle 1 准备Excel导入数据 2 把Excel文件另存为(文本文件(制表符分隔)(*.txt)) 或者将Excel文件另存为(Unicode文本) 之后唯 ...

  3. Windows 10 Edge浏览器、照片查看程序关闭“平滑滚动”

    升级到10后,这两个常用软件的“平滑滚动”功能,个人感觉体验有点不好,特别是图片这个自带程序,看了几十张图后就有点头晕了,所以把它关闭为好: 控制面板\系统和安全\系统\高级系统设置\高级\性能\设置 ...

  4. 用SSH连接SSH连接nitrous.io

    CSDN怎么传不上图片... http://user.qzone.qq.com/1756942789/blog/1388662053 1:先下载Bitvise SSH 2:打开 keypair man ...

  5. android ListView中button点击事件盖掉onItemClick解决办法

    ListView 1.在android应用当中,很多时候都要用到listView,但如果ListView当中添加Button后,ListView 自己的 public void onItemClick ...

  6. OC： 数组、集合、字典

    数组.字典.集合 参考1   参考2  参考3  参考4  参考5 NSArray * nn  = @[@"元素1",@"元素2",@"元素3&quo ...

  7. Web网站压力测试工具

    使用Microsoft Web Application Stress Tool对web进行压力测试 不错关于压力测试博客: http://blog.sina.com.cn/s/blog_5155e8d ...

  8. Pre-compile (pre-JIT) your assembly on the fly, or trigger JIT compilation ahead-of-time （转）

    Introduction All .NET developers know that one of the best features of the CLR is JIT-compilation: J ...

  9. maven项目编译漏掉src/main/java下的xml配置文件

    在整合Spring + Mybatis框架的时候,自动扫描配置都已经配置好了. 配置如下: <?xml version="1.0" encoding="UTF-8& ...

  10. MyEclipse7.0破解下载

    MyEclipse7.0 下载地址:downloads.myeclipseide.com/downloads/products/eworkbench/7.0M1/MyEclipse_7.0M1_E3. ...