IE11中inline-block元素底部空隙源于vertical-align:baseline默认对齐机制，导致基线下方预留descender空间；添加vertical-align:top/middle/bottom可彻底消除，其中top最稳定可靠。
IE11里inline-block元素底部空隙是vertical-align惹的祸
这个空隙不是HTML空白字符导致的，而是vertical-align默认值baseline在作祟。IE11（以及所有浏览器）会把inline-block元素的底部对齐到父容器内“基线”位置，而基线约在小写字母x的下沿，上面还留出descender空间（比如g、y的尾巴），于是元素下方就多出几像素空白。
给inline-block元素加vertical-align: top/middle/bottom就能解决
这是最轻量、兼容性最好、且不破坏盒模型的解法。关键不是“要不要加”，而是加哪个值：
-
vertical-align: top：对齐到父容器内容区顶部，适合导航菜单、图标组等需要严格顶对齐的场景 -
vertical-align: middle：对齐到父容器x-height中点，适合按钮+文字混排，但要注意它和line-height耦合，若父容器line-height很大，可能反而偏高 -
vertical-align: bottom：对齐到父容器内容区底部，比top更少受字体影响，但在有文本的上下文中可能和文字底部不对齐
示例：.nav-item { display: inline-block; vertical-align: top; }
别只设父容器font-size: 0——它压不住baseline空隙
很多人误以为font-size: 0能一并解决所有inline-block间隙，但它只消灭HTML空白符产生的水平缝隙，对vertical-align: baseline导致的垂直空隙完全无效。你在IE11里看到的“底部悬空”，哪怕父容器font-size: 0也照常出现。
- 如果同时存在两种缝隙（HTML空白 + baseline），必须双管齐下：
font-size: 0+vertical-align: top - 子元素含文本时，仍需显式重置
font-size，否则文字不可见 - 避免用
line-height: 0试图覆盖——它不影响baseline对齐逻辑，空隙仍在
IE11不支持gap，但flex布局仍可安全用于消除baseline空隙
虽然IE11不支持gap，但它完整支持display: flex（2012年就已实现）。用flex替代inline-block，能从根本上绕过vertical-align机制，也就没有baseline空隙问题。
- 只需改父容器：
display: flex，子元素自动按align-items: stretch拉伸，无底部空隙 - 横向间距可用
margin-right或margin-inline-end模拟（IE11支持margin-inline-end） - 注意：IE11的flex不支持
gap，也不支持flex-wrap: wrap-reverse等新特性，但基础单行布局完全可靠
真正容易被忽略的是：当项目里既有legacy inline-block代码，又有人偷偷加transform: translateY(-1px)去“微调”空隙——这种补丁在IE11里可能触发hasLayout异常，且会让屏幕阅读器解析错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
