移动端 SVG 文本上标下标样式为何被 CSS 覆盖
当 SVG 内部 tspan 元素同时存在属性与 CSS 样式时，CSS 属性会覆盖 SVG 属性的设置。
检查 SVG 属性与 CSS 样式的冲突
在移动端网页中，如果 SVG 内部的 tspan 标签同时设置了 baseline-shift 属性和 CSS 样式，浏览器会优先使用 CSS 的值。这意味着开发者不能仅依赖 HTML 标签上的属性来控制文本的上下标位置，必须确保 CSS 样式与预期效果一致。例如，如果 tspan 标签上写了 baseline-shift='super'，但 CSS 中又写了 baseline-shift: sub，最终显示效果将取决于 CSS 的值。
排查此类问题时，应首先检查 tspan 元素上是否直接嵌入了 baseline-shift 属性。如果存在该属性，需要确认对应的 CSS 选择器是否也设置了相同的属性。根据资料说明，只要 CSS 属性存在，其值就会覆盖 SVG 属性的值。因此，开发者应统一使用 CSS 来控制样式，或者确保 HTML 属性与 CSS 属性的值保持一致，以避免意外的显示结果。
确认 CSS 属性的应用范围与生效条件
需要注意的是，baseline-shift 属性仅适用于 SVG 内部的 textPath 和 tspan 元素，并不适用于其他 SVG、HTML 或伪元素。这意味着在普通的 HTML 标签上使用该属性是无效的。在移动端开发中，如果发现上标下标样式未生效，应确认该属性是否应用在了正确的元素上，即嵌套在 SVG text 标签内的 tspan 元素。
此外，该属性在 2026 年 3 月起在最新设备和浏览器版本中可用，旧版本可能不支持。如果移动端用户使用的是较老的浏览器，即使设置了正确的 CSS 属性，也可能无法看到预期的效果。因此，在部署前应进行兼容性测试，确保目标用户群体使用的设备能够支持该属性，否则可能需要提供降级方案或使用其他技术实现类似效果。
验证 CSS 覆盖后的显示结果
为了验证 CSS 是否成功覆盖了 SVG 属性，可以在移动端浏览器中打开页面并检查文本的显示位置。如果 CSS 设置为 sub，下标文字应显示在基线以下；如果设置为 super，上标文字应显示在基线以上。如果发现显示位置与预期不符，说明 CSS 属性可能未正确应用，或者被其他样式规则覆盖。
开发者可以使用浏览器的开发者工具来检查 tspan 元素的计算样式。在计算样式中，可以查看 baseline-shift 的最终值，以确认是否为 CSS 设置的值。如果计算样式显示的值与 HTML 属性一致，说明 CSS 未生效；如果显示为 CSS 设置的值，则说明覆盖成功。通过这种方式，可以快速定位问题所在，并调整 CSS 或 HTML 属性以确保正确的显示效果。
使用关键字或长度百分比调整上下标位置
除了使用 sub 和 super 关键字外，baseline-shift 属性还支持使用长度或百分比来精确控制上下标的位置。百分比值是相对于父文本内容行高的主导基线计算的。在移动端设计中，如果需要更精细的控制，可以使用具体的像素值或百分比来调整上标或下标的位置，以满足特定的设计需求。
在使用长度或百分比时，需要注意正负值的使用。正值会提升主导基线，负值会降低主导基线。例如，设置 baseline-shift: 4% 会将文本向上移动，而 baseline-shift: -0.5px 会将文本向下移动。开发者应根据实际设计要求选择合适的值，并确保该值在支持的范围内，以避免出现意外的显示效果。同时，应确保父元素的行高设置正确，以便百分比值能够准确计算。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。