SVG 文本上标下标使用百分比数值为何显示异常？
SVG 文本上标下标使用百分比数值时，其计算基准是父元素的行高，而非字体大小，这可能导致显示位置与预期不符。
确认百分比数值的参考基准是行高
在 SVG 中使用 baseline-shift 百分比数值时，必须明确其计算基准是父文本内容元素的行高。根据规范，百分比值是相对于父元素行高的计算结果。这意味着如果父元素的行高设置较小，即使字体大小很大，上标或下标的偏移量也会受到限制。开发者需要检查父元素的 line-height 属性，确保其数值足够大，以支撑预期的偏移效果。
与基于字体大小的偏移不同，百分比偏移直接作用于行高。如果父元素未显式设置 line-height，浏览器会使用默认值。在移动端开发中，默认行高可能不足以容纳较大的百分比偏移，导致上标或下标显示在容器外部。因此，在调整百分比数值前，应先确认父元素的行高设置是否符合预期。
检查父元素行高设置是否影响计算结果
要验证行高对百分比偏移的影响，可以通过调整父元素的 line-height 属性来观察变化。如果增加父元素的行高，百分比偏移量应相应增加；反之，减小行高则偏移量会减小。这种关系确保了偏移量与行高的线性关联。开发者应确保行高设置合理，避免因行高过小导致上标或下标被截断或显示异常。
在移动端调试时，可以使用开发者工具查看父元素的 computed style。如果行高显示为 auto 或默认值，建议显式设置一个较大的数值，以确保百分比偏移能够正确计算。例如，将 line-height 设置为 1.5 或更高，可以为百分比偏移提供更大的空间。
使用具体数值验证偏移效果是否符合预期
如果百分比数值导致显示异常，可以尝试使用具体的长度单位（如 px 或 em）来替代百分比。具体数值直接作用于基线的偏移量，不受行高限制。通过对比百分比和具体数值的显示效果，可以判断问题是否由行高基准引起。例如，将 baseline-shift: 50% 替换为 baseline-shift: 10px，观察偏移量是否更符合预期。
在验证过程中，应确保父元素的字体大小和行高设置一致。如果父元素同时设置了 font-size 和 line-height，百分比偏移会基于 line-height 计算，而具体数值则直接作用于基线。这种差异可能导致显示效果不同。开发者应根据实际需求选择合适的单位，确保上标或下标的显示位置准确。
排查浏览器兼容性与继承问题
虽然 baseline-shift 属性在 2026 年 3 月起在最新设备和浏览器版本中可用，但旧版本可能不支持百分比数值。如果目标浏览器较旧，建议使用关键字（如 sub 或 super）或具体长度单位。此外，baseline-shift 属性默认不继承，但如果父元素设置了 inherit 或 initial 值，子元素可能会继承父元素的设置。检查父元素的样式定义，确保其不会意外影响子元素的偏移计算。
在移动端开发中，兼容性测试尤为重要。不同浏览器对百分比数值的处理可能存在差异。开发者应确保目标设备支持该属性，并测试各种场景下的显示效果。如果发现兼容性问题，可以回退到关键字或具体数值，以确保功能正常。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。