Button size inheritance mystery

Question

TL;DR

• Fiddle or minimal example page
• <input type="button">, <button> and <a> have the same button class
• they should all inherit the body's font size (13px)
• Firefox and Chrome display 13.333333px as font-size for <input> and <button>
• Firefox and IE render buttons wrongly
• Why? How to fix?

---

Full Version

I'm trying to set up a CSS class that allows me to style <input type="button">, <button> and <a> elements the same using one class.

Also, I want buttons on my site to inherit the font size or at least use a font size relative to the one inherited. That is to ensure that different devices can use their preferred (and optimized) default font size for the buttons on my site.

For testing purposes, I've created a minimal example page. It's also available on JSFiddle. I've set the body font-size to 13px there, also for testing. The page uses the Meyer Reset.

The results are a mystery for me. Not only does it look annoyingly wrong in Firefox (49), in the latter and Chrome (54) the buttons inherit wrong font sizes. I assume it's more of a coincidence that Chrome displays the buttons correctly. Internet Explorer 11 renders the <a> button slightly less wide, but is the only browser of the three tested ones that displays the correct font-size for all three button elements. The other browsers display 13.333333px for the <input> and <button> elements and only the correct for <a>. In addition, Firefox' font rendering contradicts the font-size values shown in the inspector.

I've not tested it in other browsers, such as Safari, Opera or Edge.

I hope, I just got my wires crossed. I fiddled around a bit with this and couldn't figure out where this comes from now how to fix/workaround it. Please enlighten me.

---

Edit 1: Firefox Workaround

With the help of the following answers I was able to make a Firefox workaround.

• https://stackoverflow.com/a/40462301/2477364
• Remove extra button spacing/padding in Firefox

To .button add:

font-family: inherit;

Add:

.button::-moz-focus-inner
{ margin: -1px; padding: 0; border-width: 1px; }

Further suggestions still welcome.

Answer 1

The problem is that some browsers decide to give to input elements a different font-family. Try to add a font-family property to the .button class, so that the browser won't set his own depending on the html element.

The same goes for the font-size. I agree on what you say about the font: inherit in the Meyer reset, but somehow (and i don't know why, we should ask some browser behaviour expert), the browser add it's own built-in css after all your custom css for certain elements. To prevent this, you need to explicitly tell the browser how to render certain stuff. You may ask "which stuff? i can't write every single css property for a class" and you're right.

What i suggest to do is, with the help of the browser console, to check which are the properties being overwritten by the browser itself, and, once indentified, to write them in your css.

Check this image for an example with the Chrome console:

1. Select the element you want to analyze
2. Go on the "computed tab". This will tell you what are the real css properties applied for that element
3. You can filter all the properties by entering a text there
4. Notice that 13.3333px is a value that comes from the user agent stylsheet (default behaviour of the browser) and it is overwriting your own css.

5. Edit your css accordingly to that.