PC Chrome和Mac Chrome以不同方式计算盒子高度

时间：2018-05-12 01:47:31

标签： css google-chrome font-face webfonts

我正在处理下划线调用的网站设计沿文本底部被压扁，字面上接触基线。我绝对定位了一个带有border-bottom的after伪元素来实现这一点，而且我发现Mac Chrome和PC Chrome的盒子高度之间存在奇怪的不一致。

注意＆＃34;访问＆＃34;链接在右上角。这个截图是Mac Chrome，它的外观应该如何。开发工具声称<a>标记的框高度为30px。 enter image description here enter image description here

了解PC Chrome中同一网站的情况。正如您所看到的，在文本和下划线之下有一个小间隙，因为PC Chrome认为同一个精确元素的框高度为22px。 enter image description here

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

这里发生了什么！？

这是我检查过的事情的总结：

  • 我使用FontSquirrel使用＆＃34;匹配X-Height＆＃34;导出了woff / woff2文件。选项开启为＆＃34; 100％＆＃34;
  • 两种浏览器都将缩放设置为100％
  • 元素的计算字体大小为22px。
  • 元素的计算行高为22px。
  • 这两个元素都有box-sizing: content-box。

1 个答案:

答案 0 :(得分：0)

如果框模型确实存在问题，您可以在a标记和::after元素上设置box-sizing属性，以强制对框模型进行一致渲染，然后将变量调整为必要的。

box-sizing: border-box
相关问题
最新问题