Text-decoration: obvious mismatch between appearance and computed values

Question

I noticed this (weirdness?) When playing 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 the 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 corresponding CSS rules as containing text-decoration: none; but the text is really underlined:

_{(source: pangram.net )}

---

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

_{(source: pangram.net )}

MDN says text-decoration applies to all elements .

I understand that there is a simple workaround - just apply the text-decoration property to the a link, but this is not the behavior I expected. Can someone explain this (apparent) mismatch?

Edit: I suppose the answer is here: Line Design: Underlined, Underlined and Strikethrough

When specified or extended to a container block that establishes an inline formatting context, decorations extend to an anonymous inline field that wraps all incoming children of the inline level of the container block.

But I still do not fully understand what is happening.

Answer 1

Chrome and Firefox emphasize default hyperlinks, as you know.

What happens here, since text-decoration evaluates to none on #baz (as specified in the CSS rule), the value used ends underline as a result of propagating the default browser style from its ancestor, element a . This used value replaces the calculated value when rendering the page to the canvas, but with respect to the DOM, the calculated value remains none , based only on cascading resolution.

So the mismatch here is the difference between the calculated value and the value used. Definitions can be found in section 6.1 .

This behavior of the propagation of text-decoration values ​​in text-decoration fields, which occurs independently of the cascade, is outlined here :

When it is specified or extends to an inline element, it affects all fields generated by this element, and then applies to any nested block level blocks that divide the inline line (see section 9.2.1.1 ).

Answer 2

you need to put text-decoration: none in the a link to remove the underline

fiddle

I think the underscore still exists, because the element is inside the a tag or the a tag, which the browser recognized as a link but does not have the textual design of the element itself.

Answer 3

"text-decoration" is a property of the "a" tag ... so just add it to the "a" tag and its operation ... see demo here

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