用 display: flex + align-items: center + justify-content: center 实现圆形序号居中，避免 line-height 和 vertical-align 的浏览器差异；连接线用 ::after 伪元素统一控制；动态高亮需同步 aria-current 并用 transition 控制动画。
怎么让圆形序号在不同浏览器里都居中对齐
圆圈里的数字经常偏上或偏左，不是 css 没写对，而是 line-height 和 vertical-align 在不同浏览器默认行为不一致，尤其 safari 对 flex 子项的基线处理更敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+align-items: center+justify-content: center替代纯文本居中，绕过行高干扰 - 给圆圈元素显式设置
box-sizing: border-box，避免 padding 影响尺寸计算 - 避免用
vertical-align: middle配合inline-block，IE11 和旧版 edge 会错位 - 如果必须兼容 IE11，改用
position: relative+top: 50%+transform: translateY(-50%)
连接线怎么和圆形序号对齐又不露马脚
常见错误是连接线用 border-right 或伪元素画出来后，末端和下一个圆圈之间有 1px 缝隙，或者在缩放时出现模糊、锯齿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 连接线统一用
::after伪元素 +width: 100%+height: 2px，定位起点设为圆圈右侧中心点（right: -50%+top: 50%） - 所有尺寸单位统一用
px，别混用rem或%，否则缩放时相对误差放大 - 加
transform: translateZ(0)强制硬件加速，防止 chrome 下线条发虚 - 移动端要注意：ios Safari 对
transform的子像素渲染不稳定，可补一句backface-visibility: hidden
怎么动态控制当前步骤高亮（比如第3步激活）
靠 js 切 class 很容易，但容易漏掉两个关键点：一是状态没同步到 aria 属性，二是过渡动画卡顿或闪动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
data-step="3"+data-current="2"这类属性驱动样式，比纯 class 更易维护状态 - 高亮色变化必须走
transition: background-color 0.2s ease，别用opacity或transform模拟，语义不对 - 给激活态圆圈加
aria-current="step"，屏幕阅读器才能正确播报“当前在第三步” - 如果步骤数动态生成，确保 JS 更新 dom 后，立即触发一次
getComputedStyle强制重排，避免首帧样式未生效
响应式断点下连接线断裂或重叠怎么办
PC 端横排没问题，一到手机就发现连接线歪了、圆圈堆一起，甚至文字换行把序号顶出框外。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别用
white-space: nowrap强撑横排，改用媒体查询 +flex-direction: column，竖排更可控 - 连接线在竖排时改用
border-bottom，而不是旋转 90° 的border-right，减少 transform 带来的渲染不确定性 - 圆圈字号用
clamp(14px, 4vw, 18px)，避免小屏下数字被裁切 - 竖排时给每个步骤项加
margin-bottom: 1.5rem，别依赖连接线高度做间距，否则动画过程中会跳
最麻烦的其实是圆圈边框在 Retina 屏上变细或消失——记得所有 border 都写成 1px solid #ccc，别省略 solid，否则某些安卓 webview 会忽略渲染。