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

Question

我理解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：地图图标为25px
• Linux上的Firefox 50和Linux上的Chromium 53：地图图标为33px

Answer 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元素。