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;沒有一個簡單的例子

回答

相關問題