1

我创建了一个带有按钮 html 标记的按钮。现在我正在尝试在 em 中制作高度和宽度。我知道 16px 等于 1em。该规则适用于我目前看到的所有东西，除了按钮。如果我希望按钮高度为 45px，则按钮高度为 45px。如果我想将 45px 更改为 em，那就是 2.8125em。会短很多。为了使它接近 45px 与 em 它实际上是 3.5em 左右，在 px 中实际上是 56px。这是为什么？是浏览器的问题吗？顺便说一句，我正在使用 Safari。

4

6 回答 6

6

em等于相关元素的字体大小。如果您的按钮的字体大小与16px不同，那么em也会有所不同。

您一直在查看的所有元素的字体大小都必须设置为 16 像素。这并不奇怪，因为它是许多浏览器的默认设置。

于 2013-01-10T15:54:23.737 回答
2

其他人谈到了对 em 单位如何与像素相关的误解，但根本问题尚未得到充分解决。

我今天发布了同样的问题，showdev在这里回答了它。

本质上，按钮应用了“系统字体”，阻止它继承其父级的字体大小。据我所知，这发生在所有主要浏览器中，并且是“预期行为”。

为了克服这个问题，在你的 css 中，指定按钮标签（或只是一个特定的按钮）应该显式地继承它们的字体大小：

button {
     font-size:inherit;
}

这将使其将 em 大小视为与您正在处理的其他元素相同。当然，这也会改变文本的大小，这对你来说可能是也可能不是问题......

于 2014-07-02T17:14:31.793 回答
2

我知道 16px 等于 1em。

那是不对的。unil1em不对应于特定的像素值，它对应于元素当前字体的字符大小。

默认情况下，该按钮具有不同的字体。设置按钮的字体，它会得到你习惯的大小。

但是，如果您希望大小为一定数量的像素，则应使用px单位而不是em. 即使您指定相同的字体系列和字体大小，em单位也可能在浏览器和操作系统之间有所不同。

于 2013-01-10T15:57:20.550 回答
0

从此页面关于 CSS 中的单位：

em 和 ex 单位取决于字体，并且对于文档中的每个元素可能不同。em 只是字体大小。

em来自The Amazing em unit 和其他最佳实践的更多信息：

多年来，“em”的含义发生了变化。并非所有字体都有字母“M”（例如中文），但所有字体都有高度。因此，该术语指的是字体的高度，而不是字母“M”的宽度。

在 CSS 中，em 单位是测量长度的通用单位，例如页边距和元素周围的填充。

最后是W3 规范的定义：

单位

等于使用它的元素的 'font-size' 属性的计算值。

于 2013-01-10T15:55:48.893 回答
0

按钮的 line-height 可能与其他元素的 line-height 不同，加上 1em 仅等于 16px 如果这是您设置的基础。很可能是这样，但是在您提供的描述中我并不清楚，所以我只想指出这一点。

于 2013-01-10T15:57:37.747 回答
0

1em 等于 font-size 默认等于 16px（浏览器默认 font-size 选项）

例子 

<button style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;">Text</button>

于 2015-11-16T01:52:59.333 回答