移动端文字垂直对齐错位？检查 baseline-source 属性设置
当移动端文字垂直对齐出现偏差时，应检查 inline-level 盒子是否设置了 baseline-source 属性。
排查 inline-level 盒子的对齐基准
移动端页面中，inline-level 盒子（如 span）如果包含多行内容或使用了 inline-flex 布局，可能存在多个潜在的基线。默认情况下，浏览器会根据盒子类型自动选择对齐基准。如果页面出现文字垂直位置不一致，可能是浏览器默认行为与预期不符。检查代码中是否显式设置了 baseline-source 属性，以明确指定使用哪种基线。
baseline-source 属性用于定义当 inline-level 盒子拥有多个可能基线时的对齐方式。该属性支持三个关键字值：auto、first 和 last。auto 值会让浏览器根据盒子类型自动决定，inline-block 使用 last baseline，其他情况使用 first baseline。first 值强制使用第一基线对齐，last 值强制使用最后一基线对齐。通过在 CSS 中为相关元素添加此属性，可以精确控制对齐行为。
验证 inline-flex 容器的默认对齐行为
在 inline-flex 容器中，默认的 baseline-source 值为 auto，这意味着浏览器会使用 first baseline。如果开发者希望容器底部对齐，需要显式将 baseline-source 设置为 last。检查代码中是否遗漏了针对特定容器的显式设置，导致浏览器使用了默认的 first baseline 而非期望的 last baseline。
MDN 文档中的示例展示了如何在三个 span 元素上应用不同的 baseline-source 值。其中 .auto 元素使用了默认的 auto 值，.first 元素使用了 first 值，.last 元素使用了 last 值。这些示例表明，通过在 CSS 中明确指定 baseline-source，可以覆盖浏览器的默认行为。验证时，应确保 inline-flex 容器中的元素使用了正确的关键字值。
检查 CSS 属性的继承与计算值
baseline-source 属性的继承性为 no，这意味着它不会自动从父元素继承。如果父元素设置了 baseline-source，子元素不会自动继承该设置。检查代码时，应确保每个需要特定对齐行为的元素都显式设置了该属性，而不是依赖继承。同时，应检查计算值是否与指定值一致，以确保样式正确应用。
该属性适用于 inline-level 盒子，包括 inline-block 和 inline-flex。在移动端调试时，可以使用浏览器开发者工具查看元素的 computed style，确认 baseline-source 的值是否为预期的 auto、first 或 last。如果计算值与指定值不符，可能是 CSS 优先级或语法错误导致的。确保代码中的属性名拼写正确，且值符合规范。
使用浏览器兼容性工具确认支持情况
baseline-source 属性的浏览器支持情况有限，并非所有浏览器都完全支持。MDN 文档指出该功能目前处于 Limited availability 状态，因为并非所有最常用的浏览器都支持。在移动端验证时，应使用支持该属性的浏览器进行测试，并使用兼容性工具确认目标设备的支持情况。
如果目标浏览器不支持 baseline-source 属性，浏览器可能会忽略该设置并使用默认行为。在这种情况下，可能需要使用其他 CSS 属性（如 vertical-align）来达到类似的对齐效果。在编写代码时，应考虑目标用户的浏览器环境，并做好降级处理。使用 Can I Use 等工具查询浏览器支持情况，以确保代码的兼容性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。