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

Question

在使用与 a:link around div相关的代码时，我注意到了这一点（奇怪？）- 在 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;
}

小提琴

---

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

_{（来源：pangram.net）}

---

同样，使用 Firebug，Firefox 会返回null计算的textDecoration样式：

_{（来源：pangram.net）}

MDN 说这text-decoration适用于所有元素。

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

编辑：我相信答案就在这里：线条装饰：下划线、上划线和删除线

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

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

Answer 1

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

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

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

这种将值传播text-decoration到后代框的行为独立于级联发生，如下所述：

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

Answer 2

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

小提琴

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

Answer 3

“text-decoration”是'a'标签的属性......所以只需将它添加到'a'标签和它的工作......看这里的演示

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