將錨點的下劃線樣式與行內塊元素相混合

我注意到，如果一個元素（如span或p）具有內嵌塊的顯示，那麼它將覆蓋放置在內部的錨點的下劃線樣式。將錨點的下劃線樣式與行內塊元素相混合

<a href="http://www.stackoverflow.com"><span style="display:inline-block">test</span></a> 
<a href="http://www.stackoverflow.com"><p style="display:inline-block">test</p></a>

有沒有辦法防止這種情況發生？

來源

2012-10-15 theblang

發佈此問題作爲答案。我覺得這是最優雅的解決方案。 – theblang

非常感謝 –

添加到樣式標記text-decoration:inherit;

來源

2012-10-16 18:17:33

這在Chrome中完美無缺。但是，在Firefox和IE中，內嵌塊跨度的下劃線略高於錨點的下劃線。 – theblang

請忽略我最後的評論。這種方法在所有瀏覽器中都能正常工作。看一個簡單的例子[這]（http://jsfiddle.net/uwZAX/3/）小提琴。我的問題是我也在使用'overflow：hidden'（實現省略號），導致FF/IE中的下劃線更高。看[this]（http://jsfiddle.net/uwZAX/4/）小提琴。 – theblang

1）移動風格的A-標籤

<a href="http://www.stackoverflow.com" style="display:inline-block">test</a>

或

2）添加下劃線的子元素

<a href="http://www.stackoverflow.com"><p style="display:inline-block;text-decoration:underline">test</p></a>

來源

2012-10-15 19:40:32

添加以下樣式：

a *:hover { text-decoration: underline }

DEMO

來源

2012-10-15 19:40:41

將錨點的下劃線樣式與行內塊元素相混合

回答

相關問題