【问题标题】:text-decoration not working on a floating element文本装饰不适用于浮动元素
【发布时间】:2013-10-26 11:23:53
【问题描述】:

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

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

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

div span {
  float: right;
}

【问题讨论】:

  • 当您浮动一个元素时,您将其从文档流中移除。

标签: html css css-float text-decorations


【解决方案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;
}

【讨论】:

  • 谢谢,这解释了。问题仍然存在,但为什么?(!);)
  • BoltClock 在his answer to my question 中解释了原因。文本装饰不是继承的,而是由父级传播、拥有和绘制的。如果孩子控制自己的位置,父母为孩子渲染东西是不合理的。另外我认为还有一个替代解决方案。您可以设置跨度以继承文本装饰div span { text-decoration:inherit;}。如果您通过向父级添加条件类来控制装饰并且不想编辑所有子级,这将非常有用。
猜你喜欢
  • 2022-07-12
  • 2013-05-25
  • 2011-12-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-13
  • 1970-01-01
  • 2016-01-13
相关资源
最近更新 更多