今天做一个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. Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

    为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...

  2. Visual Studio无法添加断点

    今天在写代码的时候突然发现无法添加断点,更加详细的场景是“按F9可以添加调试行,但是断点不显示,且显示代码行数左边的灰色区域不见了”找了各种方法也没有解决,然后重启.修复甚至重装都不行,最后在万千网页 ...

  3. IOS开发之路四（UITabBarController）

    前两天看了看斯坦福大学的iphone开发公开课,讲的倒是不错,可看的我云里雾里的,不怎么讲基础和原理,不太适合初学者.今天看了一上午ios5基础教程这本书感觉有点头绪了....废话少说,讲一讲我上午做 ...

  4. 汉字简体繁体转换----Javascript

    最近看到有个简体--繁体字互相转换的程序,是用JS实现的,感觉很好玩,所以拿来研究研究.先看看界面如下: 汉字简体繁体转换 // 0&&parent.frames.length) { ...

  5. HDU 5578 Friendship of Frog 水题

    Friendship of Frog Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.ph ...

  6. cdoj 80 Cube 水题

    Cube Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/80 Descrip ...

  7. C#中正则表达式只取前N个匹配结果

    用Regex.Matches方法可以得到同指定正则表达式对应的所有匹配结果.有时,所有匹配结果可能有成千上万个,考虑到性能效率的因素,只需要取出前N个匹配结果.下面的代码演示了做法: 需求:取字符串中 ...

  8. DirectSound的应用

    假设仅仅使用PlaySound()这个API函数来表现声音效果的话,那么就无法表现出声音的混音效果,由于PlaySound在播放还有一个声音时,必定会导致现有声音的停止.因此,使用 PlaySound ...

  9. ProgressBarLayoutView

    https://github.com/alter-ego/ProgressBarLayoutView

  10. HTML <base> 标签

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...