Neon Neon - 25 days ago 15
CSS Question

Button size inheritance mystery

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.

Button Rendering in three different Browsers

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.



To
.button
add:

font-family: inherit;


Add:

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


Further suggestions still welcome.

Answer

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. See that the 13.3333px is a value that comes from the user agent stylsheet (default behaviour of the browser) and it is overwriting your own css. Edit your css accordingly to that.

    Example with Chrome console

Comments