text-decoration: line-through 失效主因是样式被覆盖或作用对象错误；应检查继承、优先级及元素类型，语义删除须用标签，视觉修饰可用CSS，位置不准时可用text-decoration-offset微调。
text-decoration: line-through 为什么加不上删除线
常见现象是写了 text-decoration: line-through 却没效果，大概率是样式被覆盖或作用对象不对。CSS 的 text-decoration 是继承属性，但不会穿透到某些内联元素内部（比如 <span> 套在 <del> 里时容易失效），更常见的是被其他规则重置了——比如全局 CSS 里写了 text-decoration: none 且优先级更高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素，看
text-decoration是否被 strike-through 覆盖，还是显示为none - 确保目标元素不是
display: inline-block或block且设置了text-decoration: none的父容器（它会“拦住”继承） - 必要时加
!important快速验证是否是优先级问题（上线前应改用更精确的选择器）
line-through 和 <del> 标签的区别在哪
<del> 是语义化 HTML 标签，表示内容已被删除；text-decoration: line-through 只是视觉样式。两者渲染结果看起来一样，但用途和影响完全不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯视觉修饰（比如价格划掉、临时标注）用 CSS，不改变语义
- 内容确实被移除或作废（如合同条款修订、文档版本对比）必须用
<del>，这对屏幕阅读器、SEO、可访问性都关键 - 混用要小心：给
<del>再加text-decoration: line-through不会出错，但多余；反过来，只用 CSS 却没语义，AT（辅助技术）用户可能完全感知不到“这是被删掉的内容”
line-through 在不同字体下位置不准怎么办
text-decoration: line-through 的位置由字体的 font-metrics 决定，不是绝对像素偏移。所以换字体（尤其自定义 Web Font 或中文字体）后，删除线可能偏高、偏低，甚至贴着文字底部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖默认位置，用
text-decoration-thickness和text-decoration-offset微调（Chrome 89+、Firefox 70+、Safari 15.4+ 支持） - 例如：
text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-offset: 2px; - 老浏览器不支持 offset 时，可用伪元素模拟：
::after绝对定位画一条横线，但需手动控制宽度和对齐，维护成本高
React/Vue 里动态加删除线容易漏掉什么
框架里常通过 class 切换控制删除线，比如 className={isDeleted ? 'deleted' : ''}，但容易忽略状态同步和 SSR 一致性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时，如果
isDeleted初始值为false，但首屏就该显示删除线，会导致水合（hydration）不匹配警告 - 别只靠 class 控制，把语义也带上：用
<del>包裹内容 + class 控制样式，比纯 div + CSS 更稳 - 避免在
useEffect或mounted里才加 class，导致闪动——样式应在首次渲染时就确定
真正麻烦的不是写一行 CSS，而是得想清楚：这根线是给人看的，还是给机器读的，还是既要又要。字体、框架、可访问性、跨浏览器表现——每个点都能单独卡半天。
