旧版浏览器（ie8–10、android 4.4 webview、早期 safari）中inline-block间隙更难处理，因其对html空白字符解析更“实诚”，换行符几乎必渲染为≈0.25em空格，且font-size:0常需配合zoom:1才能生效，子元素必须显式设font-size，em单位易失效，letter-spacing和负margin等方案在这些浏览器中兼容性差、易引发文字模糊或对齐异常。
为什么 inline-block 间隙在旧版浏览器里更难搞
旧版浏览器（IE8–10、Android 4.4 WebView、早期 Safari）对 HTML 空白字符的解析更“实诚”：换行符几乎必然渲染为 ≈0.25em 宽的空格，且 font-size: 0 在部分场景下会被忽略或部分失效（比如父容器有 zoom: 1 或 transform）。这不是 bug，是它们的排版引擎没做现代浏览器那种优化。
font-size: 0 必须配合 zoom: 1 才能在 IE8–9 生效
单独写 font-size: 0 在 IE8–9 下经常无效，必须加触发 hasLayout 的 hack：
-
font-size: 0和zoom: 1必须同时写在**直接包裹 inline-block 子元素的父容器**上 - 子元素仍需显式设
font-size（不能只写inherit），否则文字真会消失 - 若子元素用了
em单位（如line-height: 1.5），得改用无单位数值（line-height: 1.5）或px -
<img>虽无文本，但在 IE8 下可能因继承font-size: 0导致垂直对齐异常，建议统一加font-size: 16px
IE10–11 不支持 gap，但可用 margin + :not(:last-child) 降级
如果你已用 display: flex，IE10–11 不认 gap，但可以安全 fallback：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 先写现代方案：
display: flex; gap: 8px; - 再叠加 IE 友好 fallback：
.item { margin-right: 8px; }+.item:last-child { margin-right: 0; } - 注意：不要用
:not(:last-child)代替:last-child—— IE10 不支持:not()伪类，必须用:last-child - 若项目还需兼容 IE9，只能退回
font-size: 0 + zoom: 1方案
别碰 letter-spacing 和负 margin 这些“假解法”
在旧版浏览器里，这些补丁反而更容易出事：
-
letter-spacing: -0.31em在 IE8 下最小只到 1px，且会让文字模糊、屏幕阅读器误读 -
margin-left: -4px值随font-size变化——换字体、开系统缩放、切主题色都得重调 - 父容器若有
transform: scale(0.99)，负 margin 会完全失效（尤其 Android 4.4 WebView） - 多人协作时，有人加
font-size: 0，又有人叠letter-spacing补丁，结果间隙没消，图片还变糊了
真正难处理的，是那些被 legacy JS 模板绑定、无法改 HTML 结构的老页面——这时候你得一层层检查父容器是否漏了 zoom: 1，以及每个 <button></button>、<input> 是否都显式恢复了 font-size。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
