子元素取消下划线需显式设置text-decoration: none；下划线位置偏移应统一用text-decoration-thickness和text-decoration-position控制；多线装饰必须用text-decoration-line；无显示时优先排查继承的none、裁剪或颜色问题。
text-decoration: underline 会继承，子元素怎么取消下划线？
直接加 text-decoration: underline 到父元素，子元素（比如 <a></a> 或 <span></span>）默认也会带下划线，这不是 bug，是 CSS 规范里明确规定的继承行为。想让某个子元素不显示下划线，不能靠“重置父级”，得在子元素上显式覆盖。
实操建议：
- 给需要取消下划线的子元素加
text-decoration: none—— 注意，none是唯一能真正“清除”当前元素下划线的值，unset或initial在这里不一定生效 - 如果子元素本身有伪类（如
a:hover），记得连带处理，否则 hover 时下划线又冒出来 - 避免用
text-decoration: underline solid transparent这类取巧写法——它只是把颜色设为透明，但依然占渲染空间，可能影响 line-height 或与其他装饰线叠加
为什么用了 text-decoration: underline，下划线位置看起来偏高或偏矮？
下划线的位置和粗细不是固定像素值，而是由字体的 underline-position 和 underline-thickness 控制，不同字体、不同浏览器默认值差异明显。Chrome 和 Safari 对系统字体（如 San Francisco、Segoe UI）的下划线定位更靠下，而 Firefox 偏高一点。
实操建议：
- 统一控制请显式设置两个属性：
text-decoration: underline solid #000; text-decoration-thickness: 1px; text-decoration-position: under; -
text-decoration-thickness接受auto（默认）、from-font（依赖字体内置参数）或具体长度值；生产环境建议用固定值，避免字体切换后线条突变 -
text-decoration-position: under能强制下划线落在基线之下，比默认的auto更可控，但注意 IE 完全不支持该属性
text-decoration-line: underline 和 text-decoration: underline 有什么区别？
这是 CSS Text Decoration Level 3 的新旧写法差异。text-decoration 是简写属性，老写法；text-decoration-line 是拆分后的逻辑属性之一，用于单独控制“画哪条线”。现在主流浏览器都支持后者，但它不是替代关系，而是分工更细。
实操建议：
- 如果只加下划线，用
text-decoration: underline最简洁，兼容性也好（IE9+） - 如果要同时控制下划线 + 删除线（比如价格对比），必须用新语法：
text-decoration-line: underline line-through，老写法无法实现多线并存 - 混用风险：不要在一个元素上既写
text-decoration: underline又写text-decoration-line: overline，后者会被前者覆盖（简写属性优先级更高）
下划线没显示？常见原因和快速排查点
写了 text-decoration: underline 却看不到线，大概率不是语法错，而是被其他样式压制或渲染条件不满足。
实操建议：
- 检查是否被
text-decoration: none的祖先元素影响——CSS 中text-decoration是**继承属性**，但它的值不会“叠加”，而是整条线被父级none直接禁掉 - 确认元素不是
display: inline-block或block且设置了height过小，导致下划线被裁剪（尤其配合overflow: hidden时） - 查看 computed styles，确认最终生效的
text-decoration-color不是透明色或与背景同色（比如深色背景上用了默认黑色下划线，但文字也是黑的） - 某些字体（如思源黑体某些 weight）在 Chrome 下对
text-decoration-thickness的解析异常，临时方案是换 font-weight 或加text-decoration-skip-ink: none
text-decoration + text-decoration-thickness + text-decoration-position 三件套，并在真实设备上至少测两个主流字体。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
