Question

我注意到了＆lt; button＆gt;标签似乎是从字体大小以外的东西缩放em单位。＆LT; DIV＆GT;标签没有表现出同样的行为。这种情况发生在最新版本的chrome，firefox＆amp;即

它们的风格都是这样的：

button, div {
    width: 3rem;
    height: 3em;
}

有关示例，请参阅this fiddle。

如果我调整宽度为3rem且高度为3em的div和按钮，我希望它们是方形的，除非有影响其中一个或祖先的字体大小样式。唯一的字体大小在＆lt; body＆gt;上标签，但会发生的是div是方形的，但按钮的高度小于宽度。

如果我检查chrome中的按钮，则表示它从＆lt; body＆gt;继承了1em字体大小。标签，但当我将其字体大小明确地设置为1em时，问题就解决了（参见小提琴）。

有谁可以向我解释这里发生了什么？感觉我错过了一些明显的东西。

Answer 1

您的HTML按钮似乎没有从<body>继承字体大小。我相信很多表单元素都是这样的（至少在某些浏览器中），尽管我没有文档。

我通过添加：

取得了成功

button {
    font-size:inherit;
}

WORKING EXAMPLE

Answer 2

这里发生的是浏览器应用默认的浏览器样式表，导致缩小的字体大小用于button元素。这在规范中没有描述，减少量可能因浏览器而异。默认情况下，您可以看到input元素（例如<input type="text">）发生同样的事情：字体大小小于周围文本（尽管如果使用不同的字体，可能很难看到，这是一个常见的默认值。

浏览器中的开发者工具并不完美。例如，Chrome确实将font-size元素的button显示为已继承 - 但也会将计算的大小显示为较小。解释是浏览器的默认样式表font: -webkit-small-control为button，这是真正重要的设置。有关继承的信息完全不正确。

在font-size: 1em元素上设置font-size: 100%（或等效地，button）时，您将覆盖默认设置。这比设置font-size: inherit要好一些，{{1}}的浏览器支持稍微不那么广泛。

为什么<button>标记对待em的方式与<div>的方式不同？</div> </button>

2 个答案: