β

Firefox Button Height Fix

David Walsh Blog 149 阅读

One problem I’ve seen on occasion is that button heights in Firefox are a few pixels larger than in other browsers.  This can be a nightmare when trying to unify the size of buttons with an A elements, as we found out when implementing a new feature on MDN:

Firefox Button Bug

The middle element is an INPUT and the others are your basic A element.  You can see that the INPUT element is just slightly bigger — enough that it annoys anyone with a sharp eye.  This StackOverflow post mentions a solution that includes ::-moz-focus-inner:

input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
}

This snippet helps but doesn’t completely fix the problem — the INPUT is still just a tad too big.  The Stackoverflow post mentions box-sizing but that doesn’t help.  After trying a few different solutions, I finally found one that works:

input::-moz-focus-inner { 
	border: 0; 
	padding: 0; 
	margin-top:-2px; 
	margin-bottom: -2px; 
}

Setting negative margins within the ::-moz-focus-inner brings the buttons down to correct height, and as a bonus, the text sits the proper position:

Firefox Button Bug Fix

The ultimate solution is a bit vomit-inducing, and you may need to adjust the negative margins to your specific use case, but the solution works and doesn’t cause problems for other browsers!

Read the full article at: Firefox Button Height Fix

Treehouse

Sencha Conference

作者:David Walsh Blog
JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
原文地址:Firefox Button Height Fix, 感谢原作者分享。

发表评论