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

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

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

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

Answer 1

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

这里发生的情况是，虽然 text-decoration 在 #baz 上被 计算 到 none（如您的 CSS 规则中所指定），但 used 值 结束了是 underline 是因为从其祖先 a 元素传播浏览器的默认样式。在将页面渲染到画布上时，这个使用的值替换计算值，但就 DOM 而言，计算值仍然是 none，仅基于级联分辨率。

因此，这里的差异在于计算值和使用值之间的差异。定义见section 6.1。

这种将text-decoration 值传播到后代框中的行为独立于级联进行，在here 中进行了概述：

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

Answer 2

“text-decoration”是'a'标签的属性......所以只需将它添加到'a'标签及其工作......请参阅演示here

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

Answer 3

您需要将text-decoration: none 放在a 链接上以删除下划线

fiddle

我认为下划线仍然存在，因为元素位于 a 链接或 a 标记内，浏览器将其识别为链接，但元素本身没有文本装饰..