无法撤消子元素的文本装饰 [英] Cannot undo text-decoration for child-elements

问题描述

假设您有这个html：

 < a href =＃> 
下划线
< span> 
这不是。 
< / span> 
< / a> 
  

此css：

  a：hover {
 text-decoration：underline; / *我知道，这是默认启用。 * / 
} 
 
 a：hover span {
 text-decoration：none！important; 
} 
  

为什么a> span元素仍然有下划线。我很确定你应该实际上通过使用'无'撤消装饰。我知道你可以使用这个实现我想要的结果：

 < a href =＃> 
< span class =underlined> 
下划线
< / span> 
< span> 
这不是。 
< / span> 
< / a> 
  

加上这个css：

  a：hover {
 text-decoration：none; 
} 
 
 a：hover span.underlined {
 text-decoration：underline; 
} 
  

但是，这对我来说没有意义不能设置子元素的文本装饰。
那么，为什么...？

编辑：内联块

根据@amosrivera，它在你使用inline-block时工作。我可以在Safari和Chrome上确认此设置。

  a：hover span {
 text-decoration：none; 
 display：inline-block; 
} 
  

如上所述，这适用于Safari和Chrome，但不适用于Firefox。以下解决方案适用于Firefox，但不适用于Safari和Chrome ...

  a：hover span {
 text装饰：无; 
 display：block; 
} 
  

小表：

  CSS-Rule | Webkit | Firefox |歌剧| IE 
 --------------------------------------------- ----------------------------------- 
 display：block; | x | | ？ | ？ 
 display：inline-block; | | x | ？ | ？ 
  

解决方案

$ c> span 是一个内联元素。尝试此操作：

  span {
 text-decoration：none; 
 display：inline-block; 
} 
  

在线演示： http://jsfiddle.net/yffXp/

UPDATE

在FF（4？）只有 display：block 有效（在webkit同时没有），导致换行符。 p>

UPDATE 2 （hack？）

 一个span {
 display：inline-block; 
 background：#fff; 
 line-height：1.1em; 
} 
  

在白色背景上覆盖边框不是很漂亮， 。它适用于除 IE 6,7

在线演示 a href =http://jsfiddle.net/yffXp/6/> http://jsfiddle.net/yffXp/6/

Say you have this html:

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

And this css:

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by using this:

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

plus this css:

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element. So, why...?

Edit: Inline-blocks

According to @amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!

a:hover span{
    text-decoration:none;
    display:inline-block;
}

As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...

a:hover span{
    text-decoration:none;
    display:block;
}

Little table:

    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
--------------------------------------------------------------------------------
display: block;         |       x      |               |      ?      |     ?    
display: inline-block;  |              |       x       |      ?      |     ?

解决方案

It has to do with the fact that span is an inline element. Try this:

a span{
    text-decoration:none;
    display:inline-block;
}

Online demo: http://jsfiddle.net/yffXp/

UPDATE

In FF (4?) only display:block works (which at the same time in webkit doesn't), causes line break.

UPDATE 2 (hack?)

a span{
    display:inline-block;
    background:#fff;
    line-height:1.1em;
}

Overlaying the white background over the border is not pretty but it seems to do it. It works in every browser other than IE 6,7

Online demo: http://jsfiddle.net/yffXp/6/

这篇关于无法撤消子元素的文本装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！