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;，但文本确实带有下划线：

Chrome Console http://pangram.net/sandbox/td-chrome-console.png

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

Firebug http://pangram.net/sandbox/td-firebug.png

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在none上#baz {em>计算到underline（在CSS规则中指定），使用的值由于从其祖先a元素传播浏览器的默认样式而最终成为none。在将页面呈现到画布上时，此使用值替换计算值，但就DOM而言，计算值仍为text-decoration，仅基于级联分辨率。

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

这种将{{1}}值传播到后代框中的行为（独立于级联）概述为here：

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

Answer 2

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

fiddle

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

Answer 3

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

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

text-decoration：外观和计算值之间明显不一致

3 个答案: