Question

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.

Answer 1

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).