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

Question

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

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

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

div span {
  float: right;
}

Answer 1

这是规范所要求的，其中规定：

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

唯一的解决方法是将文本装饰也span应用于：

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

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