text-decoration not working on a floating element

Question

When using a div with the text-decoration style it does not seem to apply it on a span inside the div after floating that span. What is the explanation for this and how can I fix it?

See my problem here: http://jsfiddle.net/wtBDX/2/

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
}

Answer 1

This is required by the spec, which states:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

The only fix is to apply the text decoration to the span as well:

div {
  color: red;
  text-decoration: line-through;
}

div span {
  float: right;
  text-decoration: line-through;
}