How to style button inputs to be identical in Chro

问题:

Take a look at this JSFiddle example in Chrome and FireFox.

In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from How to reset default button style in Firefox 4 + (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.

Chrome:

FireFox:

As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?

---

Also, I'm using Meyer's CSS reset stylesheet

回答1:

Firefox adds a special padding to inputs and button elements. This takes care of it:

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

回答2:

I have concluded that the only way of ensuring that button/submit inputs remain identical across browsers is to recreate them using divs. Creating button inputs is easy since you can attach click events onto divs the same way as on buttons. Creating submit inputs is barely any harder. I solved it using jQuery by declaring a class, for instance 'submit', and adding the submit button functionality to all elements that have that class on load. Here's an exampe:

// On page load:
$('.submit').on('click', function(e) {
    $(this).closest('form').submit();
});

Divs with the submit class that are not in a form will do nothing when clicked.

If you add tabindex="n" (where n is a number) to the element, it can also be focused using tab, just like a normal button. You can also style it to show that it's focused by using the :focus css pseudo-class. Then you could use space or enter to click the button with this event handler:

$('.submit').on('keypress', function(e) {
    if (e.keyCode == 13 || e.keyCode == 32)
        $(this).closest('form').submit();
});

_{(I wrote that last snippet in a hurry and haven't actually tested it. If you find an error in it or test it successfully please edit this answer accordingly.)}

回答3:

Have you by any chance set a line-height on the buttons on your page? You haven't on the fiddle, but line-height's other than normal, aren't accepted on firefox, and some other browser I believe - maybe IE, I'm not sure.

回答4:

Have you tried a CSS reset? I dont have FF on this computer or else I would check if this works.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">