HTML如何实现物流跟踪时间轴

本文深入解析了如何用纯HTML与CSS稳健实现物流跟踪时间轴，强调ul+li结构在语义清晰度、跨浏览器兼容性（尤其微信WebView和老旧安卓/iOS内核）上的不可替代性，并详解了规避伪元素定位失效、动态高亮“进行中”节点、移动端平滑展开详情等实战难点；核心洞见在于：真正决定时间轴可靠性的不是技术炫技，而是前后端对状态字段（如current/data-status）含义的严格对齐——状态定义模糊，再精致的视觉呈现也失去意义。

用 ul + li 搭建时间轴结构最稳妥

纯 CSS 实现物流时间轴，ul 是语义最清晰、兼容性最好的容器——比 div 套嵌更易读，比 Flex/Grid 布局在老版微信浏览器里更稳。li 逐条代表一个物流节点，顺序即时间先后，天然符合语义。别用 ol，因为物流状态可能回退（比如“派送中”→“滞留中”），序号反而误导用户。

关键点：

• 每个 li 包含三部分：time（时间戳）、strong（状态标题）、p（详情，如网点/操作人）
• 用 data-status 属性标记当前进行中节点，比如 data-status="active"，后续 CSS 和 JS 都靠它判断
• 避免在 li 里塞太多嵌套，微信内嵌 WebView 对深度 >4 层的渲染容易错位

CSS 画竖线和圆点时避开伪元素兼容陷阱

主流做法是用 ::before 画圆点、::after 画连接竖线，但 iOS 12 以下 Safari 和部分安卓 UC 内核会忽略 position: absolute 在 li 上的伪元素定位。稳妥方案是显式加 position: relative 到 li，且竖线改用背景图或 border 模拟。

推荐写法：

li {
  position: relative;
  padding-left: 36px;
}
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #409eff;
}
li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 24px;
  width: 2px;
  height: calc(100% - 24px);
  background: #e4e7ed;
}

注意：calc() 在 IE11 中不支持百分比减法，若需兼容，改用固定高度或 JS 动态计算。

动态高亮“进行中”节点要监听 data-status 而非索引

后端返回的物流节点数组顺序未必严格递增（例如补录旧记录），靠数组下标判断“最新一条”会出错。必须依赖字段，比如后端统一返回 "current": true，前端映射为 data-status="active"。

JS 处理建议：

• 遍历所有 li，用 el.hasAttribute("data-status") 找出 active 节点，再向上滚动到视口： el.scrollIntoView({ behavior: "smooth" })
• 避免用 querySelector("li:last-child") 高亮——补单、异常重推会让最后一条不是最新状态
• 如果页面加载后物流还在更新，用 MutationObserver 监听 li[data-status] 变化，而不是轮询

移动端点击展开详情别用 details 标签

<li aria-expanded="false">
  <div class="timeline-header">…</div>
  <div class="timeline-detail" style="max-height: 0; overflow: hidden;">
    <p>取件码：123456</p>
  </div>
</li>