移动端竖排文字左侧边框样式为何不生效？检查 border-inline-start-style 属性
移动端竖排文字左侧边框样式不生效时，应检查 border-inline-start-style 属性是否被覆盖或未正确映射。
排查 border-inline-start-style 属性的继承与覆盖情况
竖排文字布局下，左侧边框样式由 border-inline-start-style 属性控制，该属性会根据 writing-mode 和 direction 自动映射到物理边框。如果样式未生效，首先检查该属性是否被父级元素的样式继承或覆盖。在 CSS 中，若父元素设置了 border-inline-style 或 border-style，子元素可能无法显示预期的独立样式。可以通过开发者工具检查元素的计算样式，确认 border-inline-start-style 的最终值是否为 none 或其他非预期值。
另一个常见原因是简写属性 border 的干扰。当同时定义 border 和 border-inline-start-style 时，border 的值可能会覆盖简写属性的效果。例如，若 border 属性设置为 solid，而 border-inline-start-style 设置为 dotted，浏览器可能优先使用 border 的值。建议移除 border 的简写设置，单独测试 border-inline-start-style 的效果，以排除冲突。
验证 writing-mode 与 direction 的映射逻辑
border-inline-start-style 的生效依赖于 writing-mode 和 direction 的值。在水平文本模式下，该属性通常映射到左侧边框；在竖排文本模式下，则映射到顶部边框。如果 writing-mode 设置为 vertical-rl 或 vertical-lr，左侧边框的样式可能被映射到顶部。因此，需要确认 writing-mode 的值是否符合预期，并检查 direction 是否影响边框的映射方向。
可以通过修改 writing-mode 的值来验证映射逻辑。例如，将 writing-mode 从 vertical-rl 改为 horizontal-tb，观察左侧边框样式是否生效。如果样式在水平模式下正常显示，说明问题出在竖排模式的映射上。此时，应检查 border-inline-start-style 的值是否与 writing-mode 兼容，并确保 direction 属性未导致边框样式被错误应用。
检查浏览器兼容性与计算样式的最终值
border-inline-start-style 是逻辑属性，其兼容性取决于浏览器的支持情况。虽然该属性在 2021 年 4 月起已广泛可用，但部分旧版浏览器可能不支持。在移动端开发中，建议使用开发者工具的兼容性检查功能，确认目标浏览器是否支持该属性。如果浏览器不支持，可能需要回退到物理属性（如 border-left-style）或使用 polyfill。
在验证结果时，应检查计算样式的最终值。在开发者工具中，展开 border-inline-start-style 的计算值，确认其是否为预期的样式值（如 dotted 或 dashed）。如果计算值为 none 或未定义，说明样式未正确应用。此时，可以尝试在样式中添加 !important 或调整 CSS 优先级，确保属性生效。
复现检查步骤与结果判断方法
复现检查步骤如下：首先，在移动端页面中选中竖排文字元素，打开开发者工具的元素检查器。其次，在样式面板中找到 border-inline-start-style 属性，查看其值是否为预期样式。再次，检查计算样式，确认最终值是否与预期一致。最后，修改 writing-mode 或 direction 的值，观察边框样式是否随映射逻辑变化。
结果判断方法：如果 border-inline-start-style 的计算值为预期样式，且边框显示正常，说明问题已解决。如果计算值为 none 或边框未显示，说明样式被覆盖或浏览器不支持。此时，可以尝试移除冲突的 border 简写属性，或使用物理属性替代，以验证问题根源。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。