按钮大小继承神秘 [英] Button size inheritance mystery

问题描述

TL; DR

• 
  
  

  我没有在其他浏览器，如Safari，Opera或边缘测试它。 b
  

  我希望，我只是把我的电线交叉。我摆弄了一下这一点，不知道这是从哪里来的，现在如何解决/解决方法。编辑1：Firefox解决方法
  
  

  
  
  

  在下面的答案的帮助下，我可以做一个Firefox解决方法。

  
  
  

  
  
  
  

  
  

  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.

  解决方案

  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.

  这篇关于按钮大小继承神秘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！