移动端竖排文字左侧边框颜色错位？检查 border-inline-start-color 属性
在移动端竖排文字布局中，如果左侧边框颜色与预期不符，应检查 border-inline-start-color 属性是否正确映射。
确认竖排文字模式下的边框映射逻辑
竖排文字布局通常使用 writing-mode: vertical-rl 或 vertical-lr 属性。在这种模式下，CSS 的逻辑属性会根据文字方向自动映射到物理边框。border-inline-start-color 属性定义了元素逻辑行首边框的颜色，它对应于 border-left-color 或 border-right-color，具体取决于 writing-mode 的值。例如，当 writing-mode 为 vertical-rl 时，inline-start 方向对应于物理上的左侧，因此该属性会控制左侧边框的颜色。
如果移动端页面显示的竖排文字左侧边框颜色与 CSS 代码中定义的 border-inline-start-color 不一致，可能是因为浏览器未正确解析逻辑属性，或者使用了过时的物理属性覆盖了逻辑属性。检查时需确认 writing-mode 的设置是否生效，以及是否有其他 CSS 规则直接修改了对应的物理边框颜色属性。
排查代码中是否存在物理属性冲突
在编写移动端样式时，开发者可能会同时设置 border-inline-start-color 和 border-left-color。根据 CSS 规范，当逻辑属性和对应的物理属性同时存在时，物理属性的优先级通常高于逻辑属性，这可能导致逻辑属性失效。因此，需要检查代码中是否遗漏了 border-left-color 的设置，或者是否需要移除该属性以避免冲突。
另一个常见问题是使用了简写属性 border。简写属性会同时设置四个物理边框的颜色，这会覆盖逻辑属性的效果。如果代码中使用了 border: 10px solid blue，那么 border-inline-start-color 的设置将被忽略。解决方法是移除简写属性，或者仅使用 border-inline-start-color 来控制颜色，同时使用 border-width 等其他简写属性来控制边框宽度。
验证浏览器兼容性与属性继承情况
border-inline-start-color 是 CSS 逻辑属性与值模块的一部分，自 2020 年起在主流浏览器中广泛可用。在移动端开发中，需要确认目标浏览器是否完全支持该属性。如果使用了旧版浏览器或特定的移动浏览器内核，可能需要添加前缀或回退到物理属性。可以通过浏览器兼容性表格检查具体浏览器的支持情况。
该属性默认继承自父元素，初始值为 currentcolor。这意味着如果未显式设置 border-inline-start-color，边框颜色将使用元素的文本颜色。如果父元素的颜色设置不正确，或者元素本身没有继承正确的颜色值，边框颜色也会出现异常。检查时需确认元素的颜色继承链是否正确，以及是否需要显式设置颜色值。
使用开发者工具检查实际渲染结果
在移动端浏览器中使用开发者工具检查元素时，可以查看计算后的样式。在计算样式中，逻辑属性会被解析为具体的物理属性值。例如，对于 writing-mode: vertical-rl 的元素，border-inline-start-color 可能会被解析为 border-left-color。通过检查计算样式，可以确认逻辑属性是否正确映射，以及是否有其他属性覆盖了预期值。
如果计算样式中显示的边框颜色与预期不符，可以进一步检查 CSS 规则的优先级和层叠顺序。使用开发者工具的高亮功能可以快速定位应用了哪个 CSS 规则。此外，还可以尝试临时移除冲突的规则，观察边框颜色的变化，以确认问题的根源。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。