楼层序号需用CSS counter实现“L1”“L2”语义化编号，嵌套回复用margin-left+border-left控制层级，元信息对齐依赖flex布局，Safari兼容性问题需避免display:contents并确保counter重置在最外层容器。
楼层序号怎么自动加“L”前缀又保持语义正确
直接用 <ol> 默认从 1 开始编号，但“L1”“L2”这种带字母前缀的楼层号不能靠 list-style-type 实现——CSS 的 upper-alpha 或 lower-roman 都不匹配。必须用 counter + ::before 手动构造。
- 给容器设
counter-reset: floor - 每条留言用
counter-increment: floor - 用
content: "L" counter(floor)生成 “L1”“L2” - 避免用
<span>手动写 L1/L2：语义丢失、SEO 不友好、后期改规则要批量替换
嵌套回复怎么避免缩进失控和层级错乱
评论区常见二级回复（如“@用户A：……”），很多人用 <blockquote> 或多层 <div> 套缩进，结果响应式下文字挤成一团，或打印时缩进消失。更稳妥的是用 margin-left + border-left 组合，并限制最大嵌套深度。
- 一级留言用
margin-left: 0，二级用margin-left: 24px，三级最多到margin-left: 48px（再深就视觉混乱） - 配合
border-left: 2px solid #e0e0e0强化层级感，比纯空白缩进更可靠 - 禁止用
padding-left控制缩进：它会撑宽容器，在窄屏下易触发横向滚动 - 若用
<aside>包裹回复内容，语义比<div>更清晰，且默认无样式干扰
时间戳和用户信息对齐总不对齐？检查这几个地方
“2024-05-20 14:30 · 张三” 这类信息常出现换行错位或右对齐失效，根本原因是父容器未设 display: flex，或子元素未用 margin-left: auto 推向右侧。
- 把时间+用户名包进一个
<div class="meta">，设display: flex; justify-content: space-between - 不要给时间单独设
float: right：浮动脱离文档流，易导致后续元素位置漂移 - 如果用
text-align: right，必须确保父容器宽度足够，否则长用户名会折行并顶到左侧 - 移动端建议把时间放用户名下方，用
flex-direction: column+align-items: flex-end
为什么 Chrome 看着正常，Safari 里楼层号突然变 0？
这是 Safari 对 CSS counter() 的兼容性坑：当容器设置了 display: contents 或用了 flex + flex-wrap: wrap，某些旧版 Safari（≤16.4）会重置计数器。最稳解法是避开依赖渲染树的复杂布局。
立即学习“前端免费学习笔记（深入）”；
- 楼层容器必须用
display: block（别用contents或inline-flex） - 计数器重置语句写在最外层容器上，比如
<section class="comments">而不是某条<article> - 测试时打开 Safari 开发者工具 → Elements → 查看对应元素 computed 样式里是否有
counter-increment生效 - 实在不行，退一步用 JS 初始化楼层号：
document.querySelectorAll('.comment').forEach((el, i) => el.querySelector('.floor').textContent = `L${i + 1}`)
