CSS問題與Safari瀏覽器 - 渲染與討厭的不均勻下劃線

Question

內H1鏈接我有這樣的事情

<h1> 
    <a href="/" title="Home">Home</a> 
</h1> 

很簡單。 IE瀏覽器，FF渲染它順利，下劃線工作正常。 Safari做這個奇怪的事情，我從來沒有見過，它強調「首頁」只有在字體襯線&曲線不要觸摸下劃線，即字母「H」會得到強調之間的兩個「支柱」（聽起來很奇怪我知道），以及這兩者接觸下劃線的地方，後者變得顏色更淺（#eee vs＃000）。

UPDATE： 顯然Safari的不渲染的鏈接以及當有

text-shadow: 0px 2px 1px #fff; 

是否有這種特別的原因？

Answer 1

原因是因爲文字陰影呈現在最前面的圖層上。如果我是你，我會爲h1添加一個邊框底部的元素，並且沒有文字下劃線。

h1 a { 
    text-decoration: none; 
    border-bottom: 1px solid blue; 
} 

當然，用任何顏色替換你的鏈接。

編輯：意識到陰影可以用span標記修復。

我想到用陰影看起來更好當有一點的下劃線與基線之間的空間，但如果你必須有一個text-decoration: underline你必須span元素添加到您的標記：

<a href="/" title="Home"><span>Home</span></a> 

CSS：

h1 a span { 
    position: relative; 
    top: 0px; 
    z-index: -100; 
}