display: inline-block 的 li 多出 4px 间隙是因 HTML 换行/空格被渲染为空白字符，解决方案首选 ul 设 font-size: 0 并给 li 单独设字号，同时需统一 vertical-align、处理 IE 兼容性，复杂布局应改用 flex。
为什么 display: inline-block 的 li 总是多出 4px 间隙？
这不是 bug，是 HTML 解析规则：换行符和空格会被渲染为一个空白字符（相当于一个空格），而 inline-block 元素会把它当作文本节点处理，导致相邻 li 之间出现不可见但占宽的间隙。尤其在容器宽度刚好卡死时，最后一项极易掉行。
-
ul上设font-size: 0，再给li单独设回正常字号（如font-size: 14px）——最常用且兼容性稳 - 删掉 HTML 中
li标签之间的所有换行和空格（不推荐，可维护性差） - 避免用负
margin抵消，因为间隙宽度受字体、行高、浏览器渲染差异影响，无法精确控制 - 别只写
li { display: inline-block }就完事，必须同步处理间隙和基线对齐
vertical-align 不设会错位，尤其混排图片和文字时
inline-block 元素默认 vertical-align: baseline，而文字基线和图片底部不在同一水平线，结果就是文字“悬空”、图标“下沉”，视觉上明显不对齐。
- 统一设为
vertical-align: top或vertical-align: middle，推荐top—— 更符合导航栏常见对齐预期 - 如果
li里有img，记得给img加vertical-align: top，否则它仍按 baseline 对齐，会拉低整行 -
list-style-position: inside也要显式加，否则圆点/数字可能被裁或偏移
IE8–IE9 下 inline-block 失效？得加 hack
IE8 虽支持 display: inline-block，但对非原生行内元素（比如 li）仍需触发 hasLayout 才能生效；IE9 在某些文档模式下也有类似问题。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法必须带兼容声明：
li { display: inline-block; *display: inline; *zoom: 1; } -
*display和*zoom是 IE6–IE7 的 hack，但保留它们对 IE8–IE9 更保险 - 现代项目若已放弃 IE9 及以下，可直接用
display: inline-block，无需 hack
什么时候该放弃 inline-block，改用 flex？
一旦需求超出“简单横排”——比如需要等宽分布、自动换行、垂直居中、响应式间距或内容截断，inline-block 就开始力不从心。它的布局逻辑依附文本流，而 flex 是独立布局上下文。
立即学习“前端免费学习笔记（深入）”；
- 用
ul { display: flex; flex-wrap: nowrap; gap: 1rem; }替代，间隙可控、无空白字符干扰 - 要等分宽度？
li { flex: 1; }比手动算百分比 + 清除间隙靠谱得多 - 要单行截断？
li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }在flex下行为更稳定 - Safari 12.2 之前对
flex-wrap在ul上的支持有缺陷，若需兼容，仍得 fallback 到inline-block
font-size: 0 加在 ul 上后，忘了给 li 重设字号——结果菜单文字全消失，排查半天才发现是字体被压没了。 
