text-decoration：none;没有一个简单的例子

我courious为什么"Should not be underlined"字下面的代码仍然强调工作：text-decoration：none;没有一个简单的例子

<html> 
<head> 
<style type="text/css"> 
.badge1-link { text-decoration: none; } 
.badge1 { text-decoration: underline; } 

.badge2-link {text-decoration: underline;} 
.badge2 {text-decoration: none;} 

</style> 
</head> 
<body> 
<a href="#" class="badge1-link"><span class="badge1">Underlined</span> | not underlined</a> 
<br/> 
<a href="#" class="badge2-link"><span class="badge2"> Should not be underlined</span> | Underlined</a> 
</body> 
</html>

来源

2012-08-16 Haradzieniec

你在浏览什么浏览器？ – 2012-08-16 12:19:35

至少FF和Chrome。两个浏览器都显示相同的内容。 – Haradzieniec 2012-08-16 12:21:23

我知道它的未成年人，但'_'是CSS中的无效字符。如果你想要最终的兼容性，你应该使用camel case或者使用'-'来代替。 – 2012-08-16 12:23:16

一旦一个锚标记已经给出强调它不能被部分去除，在路上你的建议为badge2

请参阅此链接：Remove stubborn underline from link。被接受的答案有一些评论说明了相同的情况。

的解决问题的方法是删除从锚标记上的下划线，然后添加下划线部分为您badge1

来源

2012-08-16 12:29:43 Clayton

请使用:link伪类。

来源

2012-08-16 12:20:04 keaukraine

为什么？这不会有什么区别。 – Quentin 2012-08-16 12:24:08

正如我在Firebug中看到的那样，它强调了整个'a.badge2_link'，但'span.badge2'没有下划线。但是，对于'a.badge2_link'的整个文本仍然会显示下划线。 'span.badge2'在加下划线的'a.badge2_link'文本中加下划线。 – keaukraine 2012-08-16 12:35:57

这对我来说有点不同！ – 2014-10-06 16:16:27

锚正在装饰跨度。文字修饰也可以是“上线”，因此可以将下划线文字覆盖。因此，在这种情况下，css的行为与预期相同：锚点不划下带下划线的跨度。

来源

2012-08-16 12:25:25

'text-decoration'属性需要一个值列表 - http://jsfiddle.net/Fn857/ - 所以你不需要嵌套元素来实现这一点。 – Quentin 2012-08-16 12:37:16

这就是我在下面回答的评论中所说的。谢谢你更好的解释。 – keaukraine 2012-08-16 12:40:49

澄清：http://jsfiddle.net/mnuYD/ – 2012-08-16 12:44:24

显示所做的：inline-block的会做的伎俩。它为我工作。改变你的风格如下

.badge2 {display:inline-block;text-decoration: none;}

来源

2017-01-30 10:49:25 Lasith

text-decoration：none;没有一个简单的例子

回答

相关问题