解决浏览器兼容问题，呈现一致按钮（input和a元素）

【dunhuangmi原创，转载注明】

一、如何让a和input写的button看起来一致

网页上的按钮通常是用a或input两种方式来展现的。
a标签的写法很简单，定义display:block或inline-block之后，可以给按钮长宽，字体高度，使之居中
同上可以定义input[type="button"]的样式，ie6+和其他主流浏览器都支持改变input的背景字体颜色。
那么我们假如把css写成这样：

.abtn{float:left;display:inline-block; margin:0;padding:0;color:#FFF; text-decoration:none;text-align:center;width:48px; height:24px; line-height:24px;font-size:14px; border:1px solid #28aad0;background: #0da9d9;}

 html简单写成：

<a class="abtn" href="javascript:void(0)">发布</a>
<input type="button" class="abtn" value="发布"/>

 会出现什么现象呢？


 
在所有浏览器里，input都比 定义为同样高度的 a看起来要矮了一些。
经过调试，input的height属性增加2px可以使两者看起来一样高（宽可能也需要增加，但我们一般应用按钮都是横排，所以宽度不同看起来并不明显，因此不去管它），这是因为input的height包括了border的高 度，而a是不包括的：

.inpbtn{float:left;display:inline-block; margin:0;padding:0;color:#FFF; text-decoration:none;text-align:center;
width:48px; height:26px; font-size:14px; border:1px solid #28aad0;background: #0da9d9;cursor:pointer}

 

  我们发现了新的问题，在firefox下，input里的文字比a要下沉一些。如果两者并排，就很明显了。但显然需要将a和input并排的场合还是很多的（比如一个提交钮，一个关闭钮，前者用submit更好，后者用a更省事），这样的差别不能不解决。
调整input的line-height大小根本没用，我们可以把这个属性去掉。经过查资料，知道ff对于input ，有一个默认的padding值，要通过如下的方式把它设置为0：

.inpbtn2::-moz-focus-inner,.inpbtn2::-moz-focus-inner{border:0;padding:0}
.inpbtn2{float:left;display:inline-block; margin:0;padding:0;color:#FFF; text-decoration:none;text-align:center;
width:48px; height:26px; font-size:14px; border:1px solid #28aad0;background: #0da9d9;cursor:pointer}

 这时呈现的效果就基本是满足要求的了，如果我们更加精细的话，再用hack将input内的字体抬高1px

@-moz-document url-prefix() { .inpbtn2 { padding-bottom:1px } }

 效果完美：（ff下截图，第三行）

 

二、给按钮增加圆角和渐进背景

现在有css3了，渐进背景不用再作图、切图那么麻烦。不支持css3的ie8也支持ie filter 。对于ie6,ie7等，可不必追求完美效果， 直接用不变的同色背景好了。css3的圆角非常好写，不赘述（ie6-9均不支持圆角，用缺省的方角按钮，也不太难看）

.databtn
{
background: #0da9d9;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0da9d9', endColorstr='#1dbae9', GradientType=0)"; /* IE*/
background: linear-gradient(to top,  #1dbae9,#0da9d9); /*ie 10*/
background: -moz-linear-gradient(top, #0da9d9, #1dbae9); /* Firefox */
background: -o-linear-gradient(top, #0da9d9, #1dbae9); /* opera*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0da9d9), color-stop(1, #1dbae9)); /* Saf4+, Chrome */
border:1px solid #28aad0;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.databtn:hover 
{
background: #16b2df;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#01bdfa', endColorstr='#16b2df', GradientType=0)" ;/* IE*/
background: linear-gradient(to top,  #16b2df,#01bdfa); /*ie 10*/
background: -moz-linear-gradient(top, #01bdfa, #16b2df); /* Firefox */
background: -o-linear-gradient(top, #01bdfa, #16b2df); /*opera*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #01bdfa), color-stop(1, #16b2df)); /* Saf4+, Chrome */ 
}
.databtn:active
{
background: #08a8dc;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#18a9d3', endColorstr='#08a8dc', GradientType=0)"; /* IE*/
background: linear-gradient(to top, #08a8dc,#18a9d3); /* ie10 */
background: -moz-linear-gradient(top, #18a9d3, #08a8dc); /* Firefox */
background: -o-linear-gradient(top, #18a9d3, #08a8dc); /* opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #18a9d3), color-stop(1, #08a8dc)); /* Saf4+, Chrome */
}

 

<a class="abtn databtn" href="javascript:void(0)">发布</a> 
<input type="button" class="inpbtn2 databtn" value="发布" />

 

注意到了吗：ie10的渐变写法与所有其他现代浏览器都不同，别人是“top”，ie10是“to top”，意思也就是相反的，ie10的两个颜色也是反着写的。webkit内核的浏览器写法也不同。

 非ie7-9下效果是这样的，请自行 尝试在ie7-9下什么样子：

 

三、再给两组配色供参考

.relabtn
{
background: #84b617;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#84b617', endColorstr='#8dbf2a', GradientType=0)"; /* IE*/
background: linear-gradient(to top, #84b617, #8dbf2a); /* ie 10 */
background: -moz-linear-gradient(top, #84b617, #8dbf2a); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #84b617), color-stop(1, #8dbf2a)); /* Saf4+, Chrome */
background: -o-linear-gradient(top, #84b617, #8dbf2a);/*opera*/
border:1px solid #76a814;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.relabtn:hover
{
background: #8cc70d;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cc70d', endColorstr='#86b32d', GradientType=0)"; /* IE*/
background: linear-gradient(to top, #8cc70d, #86b32d); /* ie 10 */
background: -moz-linear-gradient(top, #8cc70d, #86b32d); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8cc70d), color-stop(1, #86b32d)); /* Saf4+, Chrome */
background: -o-linear-gradient(top, #8cc70d, #86b32d);/*opera*/
}
.relabtn:active
{
background: #82b426;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7aac17', endColorstr='#82b426', GradientType=0)"; /* IE*/
background: linear-gradient(to top, #7aac17, #82b426); /* ie 10 */
background: -moz-linear-gradient(top, #7aac17, #82b426); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7aac17), color-stop(1, #82b426)); /* Saf4+, Chrome */
background: -o-linear-gradient(top, #7aac17, #82b426);/*opera*/
}

.aidbtn
{
background: #8d8d8d;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8d8d8d', endColorstr='#a3a3a3', GradientType=0)"; /* IE*/
background: linear-gradient(to top,#a3a3a3 ,#8d8d8d); /* ie 10 */
background: -moz-linear-gradient(top, #8d8d8d, #a3a3a3); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8d8d8d), color-stop(1, #a3a3a3)); /* Saf4+, Chrome */
background: -o-linear-gradient(top, #8d8d8d, #a3a3a3); /* opera */
border:1px solid #929292;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.aidbtn:hover
{
background: #a4a4a4;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4a4a4', endColorstr='#969696', GradientType=0)"; /* IE*/
background: linear-gradient(to top, #969696, #a4a4a4); /* ie 10 */   
background: -moz-linear-gradient(top, #a4a4a4, #969696); /* Firefox */
background: -o-linear-gradient(top, #a4a4a4, #969696); /* opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a4a4a4), color-stop(1, #969696)); /* Saf4+, Chrome */
}
.aidbtn:active
{
background: #a3a3a3;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8d8d8d', endColorstr='#a3a3a3', GradientType=0)"; /* IE*/
color:#6b6b6b;
background: linear-gradient(to top, #a3a3a3,#8d8d8d); /* ie10 */
background: -moz-linear-gradient(top, #8d8d8d, #a3a3a3); /* Firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8d8d8d), color-stop(1, #a3a3a3)); /* Saf4+, Chrome */
background: -o-linear-gradient(top, #8d8d8d, #a3a3a3); /* opera */
}

 

 

四、进一步改进

 

如果button内文字前面要加小icon怎么办？

我想到的方法之一是外套父元素，同时内层的background写成transparent。比如facebook是用label嵌套input来完成的。js事件可以绑在label之上。 这样整个网站的button结构就统一 了。大家可以根据这个思路试试看。

【dunhuamgmi原创，转载注明】