vertical-align在ie6–ie8中百分比值失效，因渲染引擎将小数line-height的百分比当作整数处理，导致偏移错误；应改用像素值或整数line-height，表单控件优先用top/middle关键字。
vertical-align 在 IE6–IE8 中的百分比值失效
IE6–IE8 对 vertical-align 的百分比值支持不完整，尤其当继承的 line-height 是小数（如 line-height: 1.2）时，计算直接出错，导致元素偏移位置完全不可预测。
这不是写法错误，而是渲染引擎缺陷：这些旧浏览器把百分比当作整数处理，忽略小数部分，结果 vertical-align: -10% 在 line-height: 19.2px 下本应偏移 -1.92px，却算成 0px 或 -1px。
- 最稳妥做法：避免在兼容旧 IE 的场景中使用百分比值，改用像素值（如
vertical-align: -2px） - 若必须用百分比，确保父级显式声明整数
line-height（如line-height: 20px），而非1.5或120% - 对表单控件（
input、select）这类常需微调对齐的元素，优先用top/middle这类关键字，而非数值
inline-block 元素在 Chrome/Firefox/Edge 中 baseline 错位
现代浏览器严格遵循规范：所有 display: inline-block 元素默认按 vertical-align: baseline 对齐，但“基线”由内部文本内容决定——含文字的按钮有明确基线，纯空按钮（如 <button></button>）则生成一个极小行内盒，基线位置上浮，造成视觉错位。
这不是 bug，是 baseline 对齐机制的自然表现。你看到的“偏移”，其实是不同元素基线不一致的必然结果。
- 统一设为
vertical-align: top是最快修复方式，适用于button、img、input[type="button"]等组件 - 不要依赖空格占位（如
<button> </button>），它既不可靠又影响可访问性；改用::before伪元素或min-height - 如果布局允许，直接升级为
display: flex——父容器设display: flex，子项自动顶对齐，vertical-align完全失效，也就不存在跨浏览器偏移问题
图片底部空白缝隙在各浏览器中表现不一
图片作为 inline 元素，默认与文本基线对齐，下方会留出供 descender（如字母 g、y 的下延部分）的空间，这个缝隙在 Chrome、Firefox 中约 3–4px，在 Safari 中略窄，IE6–IE8 则更明显且不稳定。
常见“修复”方案中，vertical-align: bottom 和 vertical-align: middle 都有效，但行为略有差异：bottom 把图片底边贴到行盒底边，middle 是将图片中点对齐父元素 x-height 中点（约字体高度的 0.5–0.6 倍），后者更接近视觉居中。
- 首选
vertical-align: middle，兼容性好，视觉效果稳定 -
display: block虽彻底消除缝隙，但会破坏行内流布局，慎用于需要与其他内联元素并排的场景 - 避免给父容器设
font-size: 0来“消灭缝隙”——这会影响子元素继承，后续需手动重置font-size，易遗漏
text-top / text-bottom 在 Safari 与旧版 Edge 中解析异常
text-top 和 text-bottom 的定义依赖于父元素的 font metrics，而 Safari（尤其 iOS 14 前）和旧版 Edge 对字体度量的采样不一致，导致同一段代码在不同设备上偏移量偏差可达 2–5px。
这两个值本就语义模糊——“text”指哪一层文本？父级？根字体？浏览器实现各有取舍，不适合用于像素级对齐要求的场景。
- 生产环境尽量避开
text-top和text-bottom，改用top或bottom（它们基于行盒边界，行为确定） - 若必须用，务必在真机（特别是 iPad Safari）上实测，不能仅依赖桌面模拟器
- 注意：这些值对
table-cell元素也生效，但 cell 内部的文本度量可能被表格布局进一步干扰，复杂度翻倍
vertical-align 当成“全局垂直居中工具”来用——它只作用于行内上下文，一旦父容器是 block 或用了 flex/grid，这个属性就完全不生效。确认元素 display 类型，比调参更重要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
