为什么< button>标记与< div>的处理方式不同做? [英] Why does the <button> tag treat em differently from how a <div> does?
问题描述
我注意到< 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>的处理方式不同做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
