移动端竖排文字边框宽度异常？检查 border-block-start-width 属性
在移动端页面使用竖排文字布局时，边框宽度可能显示不正确，这通常与 border-block-start-width 属性的映射机制有关。
排查竖排文字边框宽度异常的原因
移动端网页常采用竖排文字布局以适应特定场景，此时 CSS 的物理属性（如 border-top-width）可能不再对应视觉上的边框位置。border-block-start-width 是逻辑属性，它根据 writing-mode 和 direction 自动映射到物理边框。如果 writing-mode 设置为 vertical-lr 或 vertical-rl，该属性会控制元素左侧或右侧的边框宽度，而非顶部。若开发者误用物理属性或未正确设置逻辑属性，会导致边框宽度显示异常或位置错误。
该属性适用于所有元素，默认值为 medium。它不继承，计算值是绝对长度。当 writing-mode 为 vertical-lr 时，border-block-start-width 对应 border-left-width；在 vertical-rl 时则对应 border-right-width。这种映射关系由浏览器根据规范自动处理，开发者只需关注逻辑属性即可。检查时需确认 writing-mode 的值是否与预期的边框位置一致，否则可能导致视觉错位。
使用具体数值验证映射结果
为了验证边框宽度的映射是否正确，可以在 CSS 中为竖排文字容器设置明确的数值。例如，设置 writing-mode: vertical-lr，并使用 border-block-start-width: 5px。随后检查元素左侧边框的宽度是否为 5px。如果宽度不符，可能是浏览器兼容性问题或 CSS 优先级冲突。MDN 文档显示该属性自 2020 年起在主流浏览器中广泛可用，但旧版本可能存在差异。
除了数值，还可以使用关键字 thin、medium 或 thick 进行测试。例如，设置 border-block-start-width: thick。在竖排模式下，这应使对应的物理边框变粗。如果关键字无效，可能需要改用绝对长度单位如 px 或 em。验证时需确保没有其他 CSS 规则覆盖了该属性，特别是使用 !important 或更高优先级的选择器。
检查相关逻辑属性与继承设置
border-block-start-width 的行为受 writing-mode、direction 和 text-orientation 共同影响。如果这些属性未明确设置，浏览器会采用默认值，可能导致映射错误。例如，direction: rtl 可能改变边框的映射方向。此外，相关属性如 border-block-end-width、border-inline-start-width 和 border-inline-end-width 也需同步检查，以确保所有边框宽度一致。
该属性不继承，因此子元素不会自动继承父元素的边框宽度。如果希望子元素具有相同的边框宽度，需显式设置 border-block-start-width: inherit。检查时需注意，继承仅适用于值，不适用于计算后的绝对长度。如果子元素显示的边框宽度与父元素不同，可能是未正确应用继承或存在其他样式覆盖。
确认浏览器兼容性与最终结果
MDN 文档指出该属性在 2020 年 1 月起广泛可用，但不同浏览器可能存在细微差异。在移动端测试时，需确认目标浏览器版本是否支持该属性。如果使用旧版浏览器，可能需要回退到物理属性或添加前缀。检查兼容性列表后，可确定是否需要 polyfill 或替代方案。
最终验证时，需确认边框宽度在所有竖排文字元素中一致。如果某些元素显示正常而其他异常，可能是选择器或作用域问题。通过开发者工具检查计算后的样式，确认 border-block-start-width 的值是否正确应用。如果问题依旧，建议简化 CSS，移除可能冲突的规则，并逐步排查。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。