旧版安卓 WebView 中 inline-block 元素间间隙源于空白字符被渲染为文本节点，产生约 4px 不可见行框；font-size: 0 作用于父容器可消除该间隙，但需重置子元素字体且不适用于含真实文字的场景。
为什么 inline-block 元素在旧版安卓 WebView 里总有看不见的间隙
旧版安卓（4.4 及更早）的 WebView 对 inline-block 元素间的空白字符（换行、空格、制表符）渲染异常：它不会像现代浏览器那样“忽略”这些空白，而是把它们当作一个真实存在的文本节点，生成约 4px 高的不可见行框，导致元素底部出现固定高度的间隙。这不是 margin 或 padding，没法用 box-sizing 消除，也不是字体问题本身，而是排版引擎对空白处理的缺陷。
font-size: 0 真的能清掉这个间隙吗
能，但只在特定条件下有效——它必须作用于 inline-block 的**父容器**，且该容器内没有其他需要显示文字的子元素（或你得单独重设子元素的 font-size）。原理是：空白字符被渲染为“文字”，而文字高度由 font-size 决定；设为 0 后，空白行框高度塌缩为 0，间隙自然消失。
- ✅ 正确写法：
.container { font-size: 0; } .container > .item { display: inline-block; font-size: 14px; } - ❌ 错误写法：
font-size: 0写在.item上——这会让 item 自身文字也变不见 - ⚠️ 注意：若父容器里混有真实文字（比如标题），不能直接设
font-size: 0，得用伪元素或结构隔离
除了 font-size: 0 还有哪些兼容方案
旧版安卓 bug 多，font-size: 0 虽简单但副作用明显（如影响 line-height 计算、需逐层重置字体）。实际项目中常组合使用：
- HTML 层面抹掉空白：把
- CSS 层面用
float: left替代inline-block：兼容性极好，但需清除浮动，且脱离文档流可能影响布局逻辑 - 用
display: flex：旧版安卓 4.4+ 支持带-webkit-前缀的 flex，但 4.3 及更早完全不支持，需 UA 判断降级
font-size: 0 在现代浏览器里还安全吗
安全，但要小心两个细节：
- 某些 Android 5.0+ 的定制 ROM（如早期小米、华为）仍残留类似 bug，
font-size: 0依然有效，别急着删 -
font-size: 0会同时影响line-height（计算值变为 0），如果父容器有vertical-align: middle或height固定值，可能导致子元素垂直对齐错位 - 如果子元素用了
em或rem单位定义尺寸（比如width: 10em），而父级font-size: 0，那这些单位会失效——优先改用px或%
这个 bug 表面是空隙，根子在文本渲染流程；修的时候别只盯着 margin，得看空白字符有没有被当成“字”来排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
