text-decoration属性不具备继承性的原因及相关CSS特性咨询

设计初衷与背后原因 #

text-decoration采用「传播」而非「继承」的逻辑，本质是为了符合常规排版场景的直觉需求：当你给一段完整文本加下划线、删除线等装饰时，默认希望整段所有文本都统一携带该装饰，不需要逐个给内部的内联子元素单独设置属性。
如果用继承逻辑实现，会出现两个不符合预期的问题：一是如果子元素主动设置text-decoration: none会直接覆盖父级的装饰，导致整段装饰断裂；二是子元素如果字号、行高和父级不一致，各自渲染的装饰线会出现错位、断裂的问题。
而传播逻辑是直接把装饰线绘制在父元素的文本内容层上，所有属于父元素正常文本流的内联内容都会被统一覆盖，子元素自身的text-decoration会和父级的叠加显示，不会互相覆盖，更符合排版需求。

定位属性打断传播的原因 #

只有属于父元素正常内联内容流的子元素才会接收父级的文本装饰传播，一旦子元素设置了绝对定位、固定定位，就会完全脱离父元素的正常文档流，不再属于父级的文本内容块的一部分，自然不会被父级的装饰覆盖。浮动元素、块级子元素同理，也不会接收父级的text-decoration传播。

该设计的核心优势 #

• 符合通用排版习惯：整段文本统一加装饰的场景远多于需要子元素主动屏蔽父级装饰的场景，默认规则降低了常规场景的样式编写成本
• 渲染性能更高：装饰线由父元素一次性渲染，不需要每个子元素单独计算绘制，也避免了多段装饰线拼接的性能损耗
• 样式灵活性更强：支持父子装饰叠加，比如父级加下划线，子元素可以额外加删除线，两种装饰会同时显示，不需要额外嵌套标签实现

其他值得注意的类似非直观CSS特性 #

• 行高继承规则差异：父元素设置line-height: 1.5是比例继承，子元素会用自身字号乘以1.5计算行高；如果父元素设置line-height: 150%或者固定像素值，子元素会直接继承计算后的固定值，和自身字号无关，很容易出现文本重叠的问题
• z-index堆叠上下文限制：z-index的优先级只在同一个堆叠上下文中生效，如果父元素创建了堆叠上下文且z-index低于同级元素，不管子元素的z-index设多大，都不会超过父级的同级元素
• margin折叠规则：同级块级元素的上下margin会自动折叠取最大值，父块元素和首尾子块元素的上下margin也会发生折叠，浮动、定位、内联块元素不会触发该规则
• HTML/body背景传播：单独给body设置背景色时，背景会自动传播到整个视口，哪怕body的高度没有铺满全屏，只有同时给html设置了背景色才会覆盖该默认逻辑
• inline-block空白间隙：多个相邻的inline-block元素之间会因为HTML代码里的换行、空格渲染出几像素的间隙，需要通过父元素设置font-size: 0或者改用flex布局解决

内容的提问来源于stack exchange，提问作者ArmandFrvr