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

Question

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

我也明白，如果不同的浏览器具有不同的缩放大小，它们可能会以不同的大小呈现内容。

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

但是，在某些情况下（例如 https://openlayers.org/en/latest/examples/custom-controls.html, https://github.com/openlayers/ol3/issues/6194）一些在 em 中具有相同大小的元素在 Firefox 和 Chrome.

中转换为不同数量的 px

这怎么可能？

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

• Firefox 50 Windows 和 Chrome 55 Windows 10：地图图标为 25px
• Firefox 50 Linux 和 Chromium 53 Linux：地图图标为 33px

Answer 1

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

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

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

检查我看到的 OpenLayers 代码：

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

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