文本修饰：外观和计算值之间明显的差异 [英] text-decoration: apparent discrepancy between appearance and computed values

问题描述

在玩与

<sub>（来源：

< sub>（来源： pangram.net ）</sub>

MDN表示 text-decoration 适用于所有元素。

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

编辑：我相信答案在这里：线条装饰：下划线，上划线和击穿线

在指定或传播到建立
内联格式上下文的块容器时，装饰将传播到
匿名内嵌框，该包装将所有包装

，但是我仍然不完全了解会发生什么

解决方案

默认情况下，Chrome和Firefox在超链接下划线，您可能已经知道。

这里发生的是，当文本装饰得到计算到无在 #baz （在CSS规则中指定）上，使用值最终为下划线是由于从其祖先 a 元素中传播了浏览器的默认样式。在将页面呈现到画布上时，此使用的值替换计算的值，但就DOM而言，计算的值仍保持 none ，

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

这种将文本修饰值传播到后代框中的行为，独立于级联发生 ，在此处：

$ b概述
$ b

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

I noticed this (oddity?) when playing around with code related to a:link around div - styling inside div

Given this HTML:

<a id="foo" href="foobar">
  <div id="bar">
    <h2 id="baz">Foo</h2>
  </div>
</a>

And this CSS (background colors added to show structure):

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 shows the matched CSS rules as containing text-decoration: none; yet the text is indeed underlined:

_{(source: pangram.net)}

---

Similarly, using Firebug, Firefox returns null for the textDecoration computed style:

_{(source: pangram.net)}

MDN says that text-decoration applies to all elements.

I realize there's an easy workaround of just applying the text-decoration property to the a link, but this is not the behavior I would have expected. Can anyone explain this (apparent) discrepancy?

Edit: I believe the answer is here: 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.

But I still don't completely understand what's going on.

解决方案

Chrome and Firefox underline hyperlinks by default, as you're probably aware.

What's happening here is that while text-decoration gets computed to none on #baz (as specified in your CSS rule), the used value ends up being underline as a result of propagating the browser's default style from its ancestor, the a element. This used value replaces the computed value when rendering the page onto the canvas, but as far as the DOM is concerned, the computed value remains none, based on cascade resolution alone.

So, the discrepancy here lies in the difference between a computed value and a used value. The definitions can be found in section 6.1.

This behavior of propagating text-decoration values into descendant boxes, which takes place independently of the cascade, is outlined 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 section 9.2.1.1).

这篇关于文本修饰：外观和计算值之间明显的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！