Question

I’ve got a problem unique to Firefox. I’m trying to style links and buttons to look exactly the same. On every browser except Firefox, this works as desired. On Firefox, the height of the button’s content is 18 pixels, compared to 15 pixels for the link. On Chrome, Safari, and Internet Explorer, they’re both the proper 15 pixels tall. Why is this?

Here’s a demo on jsFiddle of the problem. Here’s the result I get on Chrome:

and here’s the Firefox result:

I’ve tried changing the height manually in CSS, but that doesn’t entirely work and breaks the layout on other browsers. Setting -moz-appearance: none does nothing, but then again, it usually doesn’t.

Here’s a full detail of my attempt, too, and what it’s going to be used for.

Has anyone come across this problem before? How can I equalize the height across all browsers?

Answer 1

Found another user who used this:

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

http://jsfiddle.net/MCAllinder/dehda/2/