时间戳

首页 > 解决方案 > PC Chrome 和 Mac Chrome 计算盒子高度的方式不同

css - PC Chrome 和 Mac Chrome 计算盒子高度的方式不同

问题描述

我正在处理的网站设计要求在文本底部压扁下划线，从字面上触及基线。我绝对定位了一个after带有边框底部的伪元素来完成此操作，并且我看到 Mac Chrome 和 PC Chrome 中的框高度之间存在奇怪的不一致。

注意右上角的“访问”链接。此屏幕截图是 Mac Chrome，它应该是这样的。<a>开发工具声称标签的盒子高度是30px. 在此处输入图像描述 在此处输入图像描述

在 PC Chrome 中查看同一站点的情况。如您所见，文本和下划线下方有一个小间隙，因为 PC Chrome 认为相同的确切元素的框高度为22px. 在此处输入图像描述

下划线的 CSS： a { position: relative; &::after { content: ''; position: absolute; top: 1em; width: 100%; left: 0; border-bottom: 4px solid; } } 如您所见，1em将下划线放置在两个不同操作系统上的不同位置。

这里发生了什么！？

以下是我检查过的内容的汇总：

标签： cssgoogle-chromefont-facewebfonts

解决方案

如果盒子模型确实是问题所在，您可以在a标签和::after元素上设置 box-sizing 属性以强制一致地渲染盒子模型，然后根据需要调整变量。

box-sizing: border-box

推荐阅读