button在firefox 和chrome高度不一致问题解决办法
发布时间：01/15 来源： 浏览：
关键词：
button按钮在不同浏览器的效果不一样，其实这个是button的一个bug了，那么碰到button在firefox 和chrome高度不一致问题要如何解决？下面小编来为各位介绍此问题的解决技巧。
为了验证高度我们将左边放一个高度固定的DIV，你会发现，firefox是要高出2像素的。
HTML为
<button class="button">订阅</button>
样式为
.button {
background-color:#fff;
border:1px rgba(0,0,0,0.15) solid;
color:rgba(0,0,0,0.3);
padding:6px 8px;
font-size:12px;
cursor:pointer;
line-height:1.6
}
我们会发现firefox下和chrome下高度是不一致的，原因是firefox的buttom有一个-moz-focus-inner伪类，我们初始化一下这货就可以了。
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}另外button默认不会响应padding,如需相应则box-sizing设置为content:box
顺便说下firefox chrome中input type=”text” line-height可以决定容器高度，而IE则不会撑起，需要同时写height:
