css - 文字装饰 : apparent discrepancy between appearance and computed values

Question

我在玩与 a:link around div - styling inside div 相关的代码时注意到了这一点(奇怪？)

给定这个 HTML:

<a id="foo" href="foobar">
  <div id="bar">
    <h2 id="baz">Foo</h2>
  </div>
</a>

还有这个 CSS(添加背景色以显示结构):

a {
  display: block;
  padding: 20px;
  background-color: rgb(240,240,240);
}

#bar {
  width: 200px;
  height: 100px;
  background-color: rgb(220,220,220);
}

#baz {
  padding: 20px;
  text-decoration: none;
}

Fiddle

---

Chrome 将匹配的 CSS 规则显示为包含 text-decoration: none; 但文本确实带有下划线:

_{(来源:pangram.net)}

---

同样，使用 Firebug，Firefox 为 textDecoration 计算样式返回 null:

_{(来源:pangram.net)}

MDN says that text-decoration applies to all elements .

我意识到有一个简单的解决方法，就是将 text-decoration 属性应用到 a 链接，但这不是我所期望的行为。谁能解释这种(明显的)差异？

编辑:我相信答案就在这里:Line Decoration: Underline, Overline, and Strike-Through

When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline-level children of the block container.

但我还是不完全明白这是怎么回事。

Answer 1

默认情况下，Chrome 和 Firefox 会在超链接下划线，您可能已经知道。

这里发生的事情是，当 text-decoration 在 #baz 上被computed 为 none(如指定在您的 CSS 规则中)，使用的值 最终成为 下划线 作为从其祖先 a 元素传播浏览器默认样式的结果.在将页面呈现到 Canvas 上时，此使用值替换计算值，但就 DOM 而言，计算值仍然是 none，仅基于级联解析。

因此，这里的差异在于计算值和使用值之间的差异。这些定义可以在 section 6.1 中找到.

这种将 text-decoration 值传播到后代框的行为独立于级联发生，概述了 here :

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1).