css – 文本修饰：外观和计算值之间明显不一致

2019年8月4日 145次阅读

在玩与
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为textDecoration计算样式返回null：

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

MDN says that text-decoration applies to all elements.

我意识到将一个文本修饰属性应用于链接有一个简单的解决方法,但这不是我期望的行为.任何人都可以解释这个(明显的)差异吗？

编辑：我相信答案就在这里：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.

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

最佳答案 您可能知道,默认情况下,Chrome和Firefox会为超链接加下划线.

这里发生的事情是,虽然文本修饰在#baz上计算为无(在CSS规则中指定),但由于从其祖先a元素传播浏览器的默认样式,所使用的值最终会下划线.在将页面呈现到画布上时,此使用的值将替换计算的值,但就DOM而言,计算的值将保持为零,仅基于级联分辨率.

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

将文本修饰值传播到后代框中的这种行为(独立于级联发生)概述为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 07002).

点赞