Css 文字装饰：外观和计算值之间的明显差异

我在处理与

鉴于此HTML：

此CSS（添加背景色以显示结构）：

a{
显示：块；
填充：20px；
背景色：rgb（240240）；
}
#酒吧{
宽度：200px；
高度：100px；
背景色：rgb（220220）；
}
#巴兹{
填充：20px；
文字装饰：无；
}

---

Chrome将匹配的CSS规则显示为包含

文本装饰：无但文本确实有下划线：



（来源：）


类似地，使用Firebug，Firefox会为
textEdition
计算样式返回
null
：



（来源：）


我意识到有一个简单的解决方法，就是将
文本装饰
属性应用于
a
链接，但这不是我所期望的行为。有人能解释这种（明显的）差异吗

编辑：我相信答案如下：

当在建立
在内联格式上下文中，装饰将传播到
匿名内联框，用于包装所有内联流级别的子级
块容器的属性

但是我仍然不完全明白发生了什么。
您需要在
a
链接上添加
文本装饰：none
，以删除下划线


我认为下划线仍然存在，因为元素位于
a
链接或
a
标记内。浏览器将其识别为链接，但元素本身没有文本装饰
 “文本装饰”是“a”标记的属性。。。所以只需将其添加到“a”标记中，即可工作…请参见演示

你可能知道，Chrome和Firefox默认为超链接加下划线

这里发生的事情是，虽然
文本装饰
在
#baz
上被计算为
无
（在CSS规则中指定），但使用的值最终是
下划线
，这是从其祖先
元素传播浏览器默认样式的结果。在将页面呈现到画布上时，此已用值将替换计算值，但就DOM而言，仅基于级联分辨率，计算值仍然是
none

因此，这里的差异在于计算值和使用值之间的差异。有关定义，请参见

概述了将
文本装饰
值传播到子体框中的行为，该行为独立于级联进行：

在内联元素上指定或传播到该元素时，它会影响该元素生成的所有框，并进一步传播到分割内联的任何流内块级别框（请参见）

是的，我在我的问题中说，这是一个没有下划线的解决方案，但这不是我的问题。-1 OP在问题中明确指出，他知道这一点。问题是为什么。-1 OP在问题中明确表示他知道这一点。问题是为什么。再一次，不是我的问题。重申：为什么浏览器报告该元素没有文本装饰？@steveax：是的，“文本装饰”适用于所有元素……但在steveax提到的情况下，“文本装饰”样式仅指“a”标记的默认值。。请看演示。。。该属性也适用于h2标记。。因此，解决方案是只设置“a”标记的样式…有趣的小提琴。它确实表明
文本装饰：underline
属性来自
h2
上的属性之外的其他地方，结果表明这种行为比我想象的要复杂（通常是我；-）仅添加
position:fixed/absolute
或
float:left/right
也会删除下划线，因为它会从内联流中删除元素@steveax：是的，大部分内容都包含在
文本装饰的散文中，甚至还有一些部分在CSS2.1中被遗漏了，例如块级表。（它们在text-decor-3中了吗？）。当然足够近了@史蒂文斯：啊，我把你的问题解释为问为什么在已经意识到传播行为的情况下，计算值和渲染值之间存在差异。还有，没必要拍我马屁；）BoltClock，只是澄清一下，通过阅读规范，我相信
文本装饰：underline
属性不会应用于
h2
，而是应用于生成的匿名内联框。你是怎么读的？
a {
  display: block;
  padding: 20px;
  background-color: rgb(240,240,240);
  text-decoration: none;
}