Mac系统下CSS字体大小和行高导致滚动条问题的分析与解决方案
在Mac系统中，使用CSS控制字体大小(font-size)和行高(line-height)时，有时会意外出现垂直滚动条。同样的代码在Windows系统下却不会出现此问题。本文将分析并解决此问题，以如下代码为例：
11agg 个靠
.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) 大于 font-size (30px)，Mac系统下仍然出现滚动条。将line-height 设置为42px或更大，滚动条消失。这表明问题并非简单的计算错误，而是系统对字体渲染的差异导致的。
Mac和Windows系统在字体渲染方面存在细微差别，导致字体实际高度与预期值略有出入，尤其在某些字体和字号组合下。
立即学习“前端免费学习笔记（深入）”；
解决方案：在.i-b样式中添加-webkit-text-size-adjust: none;属性：
.i-b{
display: inline-block;
font-size: 30px;
line-height: 40px;
background: red;
-webkit-text-size-adjust: none;
}
此属性可阻止Safari浏览器（及其他WebKit内核浏览器）自动调整文本大小，从而避免因系统差异导致的渲染偏差。 需要注意的是，此属性可能会影响Safari浏览器中其他文本的大小，需根据实际情况测试和调整。
