如何通过CSS在旧版IE中解决定位元素空隙问题，使用负margin-top微调定位？

本文共计805个文字，预计阅读时间需要4分钟。

这是旧版IE浏览器的渲染bug：

常见于导航栏、图标按钮、行内定位的提示气泡等场景——你明明没写任何下边距，但元素就是悬在半空，和下面内容对不齐。

• 根本原因在于IE6/7把position: relative元素当作“行内替换元素”处理，受父级vertical-align和基线对齐影响
• 只对display: inline或display: inline-block（未触发hasLayout）的相对定位元素生效
• margin-top: -3px能压住视觉空隙，但属于“治标”，真正稳定解法是切断行内布局上下文

用vertical-align:bottom消除IE空隙比负margin更可靠

负margin看似快，但一旦父容器字体缩放、行高变化，-3px就失准；而vertical-align直接干预基线对齐逻辑，从根源上关闭那个3px的生成条件。

适用前提是：该相对定位元素本身是行内级（比如<span>、<i>），且父容器是行内上下文（如未设white-space: nowrap的<div>）。