用 flex 更稳妥，尤其需兼容 ie11 或动态增减步骤时；grid 虽简洁但旧版 safari 对 repeat(4, 1fr) 支持不一致，易致间距错乱。
垂直步骤条用 flex 还是 grid？
用 flex 更稳妥，尤其要兼容 IE11 或需要动态增减步骤时。grid 写起来简洁，但旧版 Safari 对 grid-template-rows: repeat(4, 1fr) 的行为不一致，容易导致步骤间距错乱。
实操建议：
-
flex-direction: column是基础，每个步骤项用flex: 1均分高度，比硬写height: 25%更健壮 - 避免给容器设固定
height，改用min-height配合内容自撑，否则步骤文字换行后图标会偏移 - 如果要用
grid，必须显式定义每行高度：grid-template-rows: auto 1fr auto 1fr，不能全靠1fr
步骤图标和连接线怎么对齐才不漂移？
关键不是“居中”，而是“锚点统一”。图标、圆点、横线/竖线的定位基准必须一致，否则缩放或字体变化时就会错位。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
margin-top: -10px把图标往上拉——结果在 Retina 屏下偏 0.5px，打印时彻底错开 - 连接线用
border-left加在父容器上——但父容器有padding或transform就失效
实操建议：
- 图标用
position: absolute，父元素设position: relative，以左/顶部为锚点（比如top: 0; left: 50%; transform: translateX(-50%)） - 连接线单独抽成
::before伪元素，绝对定位在步骤项之间，不依赖父容器边框 - 所有尺寸单位统一用
px或rem，禁用em——图标大小若随文字缩放，连线位置就不可控
响应式断点下步骤条变横排还是堆叠？
别一刀切。横排只适合最多 4 步、且每步文案极短的场景；多数业务里，移动端堆叠 + 手势滑动更可靠。
使用场景判断：
- 后台管理页（固定宽度）：横排 +
overflow-x: auto可接受 - H5 表单流程（如开户、签约）：强制竖排，用
@media (min-width: 768px)控制横排阈值
性能影响：
- 横排时若用
white-space: nowrap+scroll-snap，ios Safari 会出现滚动卡顿 - 竖排切换时，避免用 js 动态切换 class，直接用 css 媒体查询控制
flex-direction和连接线方向
aria-label 和焦点管理为什么不能省？
步骤条不是装饰性元素。用户用键盘 Tab 导航时，没语义标记的步骤项会被跳过，屏幕阅读器读不出当前进度，等于功能残缺。
容易踩的坑：
- 只给图标加
aria-hidden="true"，却忘了给步骤文字加aria-current="step" - 用
div做步骤项，没设tabindex="0"，导致键盘无法聚焦到非可交互元素 - 完成状态用颜色区分（比如绿色），但没配
aria-live区域同步播报“第 3 步已完成”
实操建议：
- 每个步骤项用
li包裹，外层ol自带序号语义 - 当前步骤加
aria-current="step"，已完成加aria-disabled="true" - 连接线不用单独加 ARIA，它只是视觉辅助，属于
role="presentation"
最麻烦的其实是时间线里的「动态插入步骤」——dom 更新后，aria-current 很容易漏更新，得配合 MutationObserver 或状态驱动重置。