如何解决CSS inline-block产生的间隙在不同浏览器不一致

inline-block间隙本质是HTML换行符渲染为空格字符，其像素宽度由父容器font-size和字体空格字宽决定，不同浏览器对空格度量存在差异，导致Chrome约3px、Safari约4px、Firefox约3.5px间隙。

如何解决css inline-block产生的间隙在不同浏览器不一致_设置父级fontsize

为什么 inline-block 间隙在 Chrome、Safari、Firefox 里宽度不同

这个间隙本质是 HTML 换行符被渲染成一个空格字符，而它的像素宽度由父容器的 font-size 和当前字体的空格字宽共同决定。不同浏览器对相同字体中空格的度量存在微小差异——比如 Chrome 可能按 0.25em 渲染，Safari 在某些字号下会算成 0.28em，Firefox 则更保守。结果就是：同一段 HTML + 同一套 CSS，在三个浏览器里分别出现约 3px / 4px / 3.5px 的间隙，肉眼可辨。

用 `font-size: 0` 消除间隙但要避开继承陷阱

设父容器 font-size: 0 是最直接的解法，它让那个“空格字符”失去字号，从而不占空间。但副作用明显：

所有子元素会继承 font-size: 0，文字直接消失，必须显式重设
如果子元素用了 em 单位（比如 line-height: 1.5 或 padding: 0.5em），这些值会按 0 计算，变成 0px
嵌套较深时（如按钮里有 span），容易漏写 font-size，导致部分文本不可见
IE8 不支持该方案，若项目仍需兼容，得额外加 zoom: 1 或改用其他 fallback

不同浏览器下 `font-size: 0` 的兼容表现

现代浏览器（Chrome 60+、Firefox 55+、Safari 10.1+、Edge 16+）都支持 font-size: 0 抑制 inline-block 间隙。但要注意两个边界情况：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

iOS Safari 9.3 及更早版本对 font-size: 0 的处理不稳定，偶尔仍会残留 1px 间隙
当父容器同时设置了 transform: scale() 或 zoom，部分旧版 Android WebView 会忽略 font-size: 0 的效果
若父容器是或，全局设 font-size: 0 会导致所有 rem 基准崩掉，绝对不要这么干比 font-size: 0 更稳的现代替代方案如果你控制得了最低支持版本（IE10+），display: flex + gap 是唯一推荐路径： .nav { display: flex; gap: 8px; } .nav-item { flex: none; } 它彻底绕开 HTML 空白字符问题，间隙由 CSS 控制，不随字体变化，跨浏览器表现完全一致。IE10–11 不支持 gap，但可用 margin-right: 8px 配合 :not(:last-child) 模拟。真正难处理的，是那些被 legacy 代码绑死、又不敢动布局结构的页面——这时候还得回过头来调 font-size: 0，并逐层检查子元素是否漏了字号重置。