em 在 Firefox 和 Chrome 以及 Windows 和 Linux 中具有不同的 px 大小答案

【问题标题】：em has different px size in Firefox and Chrome, and in Windows and Linuxem 在 Firefox 和 Chrome 以及 Windows 和 Linux 中具有不同的 px 大小
【发布时间】：2017-04-17 13:28:33
【问题描述】：

我了解 em 大小与父字体大小相关。正如在其他线程（例如Font-size issues comparing chrome and Firefox）中所讨论的，不同浏览器的默认字体大小可能不同，因此应该设置它和/或使用一些重置 css 样式表。

我也明白，不同的浏览器如果有不同的缩放尺寸，可能会以不同的尺寸呈现东西。

尽管如此，对于给定的父字体大小，1 em 应该转换为相同数量的 px，而与浏览器无关。

但是，在某些情况下（例如https://openlayers.org/en/latest/examples/custom-controls.html、https://github.com/openlayers/ol3/issues/6194），某些在 em 中大小相同的元素在 Firefox 和 Chrome 中会转换为不同数量的 px。

这怎么可能？

编辑：在同一台计算机上进一步测试：

Windows 上的 Firefox 50 和 Windows 10 上的 Chrome 55：地图图标为 25 像素
Linux 上的 Firefox 50 和 Linux 上的 Chromium 53：地图图标为 33 像素

【问题讨论】：

Font-size issues comparing chrome and Firefox的可能重复
你能具体说明你指的是哪个元素吗？我不确定我是否理解。
@Dekel 在github链接中可以看到，图中控件的大小不一样。其他按钮使用 px 创建，但缩放按钮使用 em 创建。
@Roberrrt 我已经检查了另一个线程；但是，在这种情况下，使用重置 css 或设置字体大小无济于事。元素仍然有不同的像素数。
在 Chrome 上的 Surface（Windows 触摸设备）中，它应用了“.ol-touch .ol-control button”CSS 规则，将字体大小设置为 1.5em (24px)，但在 firefox 上它是1.4em (18.23px)，其他一些规则可能会覆盖你的“.ol-control button”

标签： css google-chrome firefox touch openlayers-3

【解决方案1】：

正如@Pedro_Costa 所提到的，.ol-touch 样式仅在某些浏览器中被触发，这会根据以下 CSS 规则使字体变大：

ol-touch .ol-control button{font-size:1.5em}

因此，问题在于 Open Layers 仅在某些浏览器和操作系统中检测触摸功能。

检查我看到的 OpenLayers 代码：

ol.has.TOUCH = ol.ASSUME_TOUCH || 'ontouchstart' in window;

看起来不错。因此，显然 Linux 中的 Chromium 和 Windows 中的 Firefox 没有正确检测到触摸屏，因此没有暴露 ontouchstart 元素。

【讨论】：