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浏览器中其他文本的大小，需进行全面测试以确保页面整体布局的兼容性。
以上就是Mac系统下CSS字体大小和行高导致滚动条出现的原因是什么以及如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
344
