【发布时间】：2021-07-17 11:19:37
【问题描述】：
我正在测试一个滚动元素，发现移动 (iOS) 和桌面浏览器之间存在一些奇怪的差异。如果您在 iPhone 和桌面上加载 this test website 并检查滚动容器的内容，我注意到在 iOS 上计算出的 <p> 元素的内容高度大于桌面上的内容高度。
这似乎是与字体渲染相关的事情，因为示例站点的 css 非常少。我检查了所有我能想到的相关 css 道具（如font-size、line-height 等），但它们在两边都具有相同的值。
在下面的图片中，<p> 元素在 iOS 上的总高度为 40 像素（20 像素边距 + 20 像素内容），在桌面上为 38 像素（20 像素边距 + 18 像素内容）。这使得容器元素的总 scrollHeight 在 iOS 上为 4000 像素，在桌面上为 3800 像素。
我在 webkit 错误跟踪器中找不到任何相关的错误，而且我目前没有要测试的 android 设备或任何类型的表格，所以我只能在我的 iPhone 和台式机上进行测试。这种行为可以在任何浏览器中重现。
我尝试过的事情
- 其他字体，仍然可以找到超过一个像素的差异
- 嵌入谷歌字体以测试它是否与移动设备和桌面设备上的原生字体有关
- 不是 100 个段落，而是只使用一个段落，但有 100 行文本
- 将
-webkit-text-size-adjust属性设置为none - 使用了一些 CSS 重置，但差异仍然存在
有人对此有提示吗？
桌面浏览器
手机浏览器
【问题讨论】：
标签： html css ios webkit font-size