文本装饰不适用于浮动元素

Question

当使用带有 text-decoration 样式的 div 时，浮动该跨度后，它似乎不会将其应用于 div 内的跨度。 对此有何解释，我该如何解决？

在这里查看我的问题：http://jsfiddle.net/wtBDX/2/

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

div span {
  float: right;
}

Answer 1

这是规范要求的，states:

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到内联块和内联表等原子内联级后代的内容。

唯一的解决办法是apply the text decoration to the span as well:

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

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