解决button 样式在firefox 和chrome高度不一致的BUG

为了验证高度我们将左边放一个高度固定的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下和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:

如果本文对你有帮助，你可以扫描右边的二维码打赏，谢谢支持

联系优畅：uctheme#qq.com (#改为@)
微信订阅号：优畅主题（uctheme）
官网淘宝店：http://uctheme.taobao.com
版权声明：版权归 优畅主题 所有，转载请注明出处！
转载请保留链接： https://www.uctheme.com/front/1296.html