Mac系统下CSS字体大小和行高导致滚动条出现的原因是什么以及如何解决？

Mac系统下css字体大小与行高导致滚动条问题的解析与解决方案

网页开发中，跨平台兼容性问题时有发生。本文聚焦于Mac系统下CSS的一个特殊问题：font-size和line-height属性组合导致滚动条意外出现。

问题现象：一段html代码在Mac系统上显示时出现垂直滚动条，但在windows系统上却正常显示。

示例代码：

立即学习“前端免费学习笔记（深入）”；

HTML:

<div class="hd-col">   <div class="box">     11agg     个靠   </div> </div>

CSS:

.hd-col {   border: 1px solid #000;   box-sizing: border-box; } .box {   overflow: auto; /* 此属性不可移除 */ } .i-b {   display: inline-block;   font-size: 30px;   line-height: 40px;   background: red; }

问题根源：box元素的overflow: auto;属性不可更改，而line-height: 40px在Mac系统下触发了垂直滚动条，Windows系统则无此问题。即使将line-height增加到42px甚至更大，滚动条也可能消失，这与预期的字体渲染差异并不完全匹配。

解决方案：

在.i-b类中添加以下css属性：

-webkit-text-size-adjust: none;

此属性可阻止WebKit内核浏览器（如safari和Mac系统上的chrome）自动调整文本大小，从而解决Mac系统下的滚动条问题。 需要注意的是，此属性可能会影响Safari浏览器中其他文本的大小，需进行全面测试以确保页面整体布局的兼容性。