ul+li是搭建物流时间轴最稳妥方案：ul语义清晰兼容性好，li按时间顺序代表节点且支持状态回退；每个li含time/strong/p三部分，用data-status="active"标记进行中节点；CSS通过relative定位+伪元素画圆点和竖线，避免兼容问题；动态高亮依赖后端current字段而非索引；移动端详情展开用手写aria-expanded+max-height过渡替代details标签。
用 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 标签
<details></details> 在 iOS Safari 上展开动画卡顿，且无法自定义箭头图标；安卓部分厂商浏览器（如华为浏览器）默认样式不一致。更可控的做法是手写 aria-expanded + max-height 过渡。
最小可用实现：
点击 header 后切换 aria-expanded 并设置 max-height 为实际内容高度（用 scrollHeight 获取），过渡用 max-height 0.3s ease-in-out。记住：别用 display: none，它无法触发 CSS 过渡。
真正难的不是画线或动效，而是状态字段含义是否被前后端明确定义——比如“已揽收”到底指司机接单、还是已扫码入库？这个一旦对不齐，整个时间轴就失去可信度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
