必须用而非或，因其语义明确表示有序事件流，确保seo、读屏器、打印、缩放及老浏览器兼容，自动编号、键盘按序跳转、纯文本保留1.2.3可读性，且支持原生倒序展示。
<ol></ol> 是唯一能同时扛住 SEO、读屏器、打印、缩放和老浏览器的结构选择，别用 <div> 堆砌或 <code><ul></ul> 冒充。
为什么必须用 <ol></ol> 而不是 <ul></ul> 或 <div>
<p>时间轴本质是「有先后顺序的事件流」，<code><ol></ol> 的语义就是 ordered list，浏览器、读屏器、搜索引擎都按这个逻辑处理：自动编号、键盘 tab 按序跳转、纯文本环境仍保留 1. 2. 3. 的可读性。<ul></ul> 表示无序，一旦后端数据错位或 JS 渲染失败，用户根本意识不到时间线已经崩了；<div> 则完全丢失结构，连“这是个列表”都表达不出来。<code><ol reversed></ol> 还能直接倒序展示“最近 5 条”，不用 JS 排序或后端改 SQL。
<time datetime="..."></time> 的值怎么填才不翻车
<time datetime="..."></time> 的值怎么填才不翻车填错 datetime 是最隐蔽也最致命的坑：页面看着正常，但所有依赖时间语义的功能全失效。必须严格遵循 ISO 8601 标准：
- 年-月-日：必须是
datetime="2024-03-15"，"2024/03/15"或"2024年3月"是无效值 - 年-月：允许
datetime="2024-03"，但"2024-3"（缺零）不行 - 带时分秒：必须补零且含
T，如datetime="2024-03-15T14:30:00"；"14:30"或"2:30 PM"不被识别 - 时区要显式声明：
datetime="2024-03-15T14:30:00+08:00"；"GMT+8"不是标准写法，部分解析器直接忽略 - 后端返回
"2024/03/15"？前端得先转：new Date("2024/03/15").toISOString().split('T')[0]再塞进datetime
<ol>::before</ol> 画主线时为什么总错位
漏掉 position: relative 是最常见翻车点。<ol></ol> 必须设 position: relative，否则 ::before 的 top/bottom 会相对于最近的定位祖先（可能是 ），导致竖线错位或消失。
- 主线推荐写法：
content: ""+position: absolute+left: 1rem+top: 0+bottom: 0+width: 2px+background: #e0e0e0 - 别用
border-left代替——它会撑开父容器宽度，且无法独立控制起止位置（比如想让线从第二项开始） - 圆点用
li::after，transform: translateX(-50%)不能省：要把定位原点从左上角拉到中心，才能“钉”在主线中点 - 内容区用
margin-left: 48px推开，别碰padding-left：一旦用后者，遇到内联元素、浮动或 flex 子项，高度计算就容易出错
IE11 和 Safari 旧版里伪元素闪动或消失怎么办
这不是 bug，是渲染机制差异。IE11 下需加 zoom: 1 触发 hasLayout；Safari 旧版对 height: 100% 在伪元素中支持不稳定，建议改用 min-height: 100vh 或 JS 动态计算高度。
-
<time></time>在 IE11 里正常显示，但datetime属性不参与渲染，只供机器读取——这点常被误认为“没生效” - 100 条记录滚动时不卡顿的关键：避免给每个
li加box-shadow或filter；主线用单次::before，别在每个节点重复画线 - 响应式下小屏圆点太小？统一设
width: 12px，别用rem缩得太小看不清
datetime 转换、伪元素定位锚点、以及 <ol></ol> 的语义完整性这三件事必须同步守住。
