我注意到< button>标签似乎是从除字体大小以外的其他方面缩放em单位. < div>标签没有表现出相同的行为. 最新版本的chrome，firefox&即.
I've noticed that <button> tags seem to be scaling em units from something other than the font-size. <div> tags aren't exhibiting this same behaviour. This happens across the latest versions of chrome, firefox & ie.
它们的样式都如下:
button, div { width: 3rem; height: 3em; }有关示例，请参见此小提琴.
如果我将div和按钮的大小都设置为3rem的宽度和3em的高度，则我希望它们是正方形的，除非存在影响其中一个或祖先的字体大小样式.唯一的字体大小在< body>上.标签，但是发生的是div是正方形，但是按钮的高度小于宽度.
If I size a div and a button both with a width of 3rem and height of 3em, I would expect them to be square, unless there is a font-size style affecting one of them, or an ancestor. The only font-size is on the <body> tag, but what happens is that the div is square, but the button has a smaller height than its width.
如果我检查Chrome中的按钮，则表示它从< body>继承了1em字体大小.标签，但是当我将其字体大小显式设置为1em时，该问题已解决(请参见小提琴).
If I inspect the button in chrome, it says that it inherits the 1em font-size from the <body> tag, and yet the problem is fixed when I set its font size to 1em explictly (see fiddle).
有人可以向我解释这里发生了什么吗?感觉好像我缺少明显的东西.
Can anyone explain to me what's happening here? It feels like I'm missing something obvious.
推荐答案似乎您的HTML按钮没有继承<body>的字体大小.我相信许多表单元素的行为方式都是这样(至少在某些浏览器中如此)，尽管我没有任何文档.
It seems that your HTML button was not inheriting font size from <body>. I believe many form elements behave this way (at least in some browsers), though I have no documentation.
通过添加以下内容，我获得了成功
I had success by adding:
button { font-size:inherit; }工作示例
更多推荐
为什么< button>标记与< div>的处理方式不同做?
发布评论