文本修饰：外观和计算值之间的明显差异

我在处理与以下内容相关的代码时注意到了这一点（奇怪？）a:div 周围的链接 - div 内的样式 https://stackoverflow.com/questions/13595357/alink-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 https://jsfiddle.net/xD6f9/

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

_{(source: pangram.net http://pangram.net/sandbox/td-chrome-console.png)}

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

_{(source: pangram.net http://pangram.net/sandbox/td-firebug.png)}

MDN 是这么说的text-decoration适用于所有元素 https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration.

我意识到有一个简单的解决方法，只需应用text-decoration财产给a链接，但这不是我所期望的行为。谁能解释这个（明显的）差异？

Edit:我相信答案就在这里：线条装饰：下划线、上划线和删除线 https://www.w3.org/TR/css-text-decor-3/#line-decoration

当指定或传播到建立的块容器时 内联格式化上下文，装饰被传播到 匿名内联框，包装所有流入的内联级子级 块容器的。

但我仍然不完全明白发生了什么事。

您可能知道，Chrome 和 Firefox 默认情况下会给超链接添加下划线。

这里发生的事情是text-decoration gets computed to none on #baz（如您的 CSS 规则中所指定），使用价值最终成为underline作为从其祖先传播浏览器默认样式的结果，a元素。这个使用值replaces将页面渲染到画布上时的计算值，但就 DOM 而言，计算值仍然存在none，仅基于级联分辨率。

因此，这里的差异在于计算值和使用值之间的差异。定义可以在中找到第 6.1 节 http://www.w3.org/TR/CSS21/cascade.html#value-stages.

这种行为的传播text-decoration值放入后代框中，发生这种情况独立于级联，概述了here http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到分割内联的任何流内块级框（请参阅第 9.2.1.1 节 http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level).