CSS - NavタグにSafariの下線が付いている

Question

ナビゲーションバーの<a>にはSafariにのみ表示されるリンクアンダーラインが付いています。どのように私はそれを取り除くのですか？私はすでにtext-decoration: none;を持っていますが、それは削除する必要があります。前にいることを見たことがない -

紫色のラインが境界下で、それは私が削除する必要が即時黒の下線です。それが立つよう

は、ここに私のコードです -

header { 
 
    height: 50px; 
 
    background-color: #fff; 
 
} 
 

 
nav { 
 
overflow: hidden; 
 
    text-align: center; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 999; 
 
} 
 

 
nav a { 
 
    color: #000000; 
 
    transition: all 0.2s ease-in-out 0s; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 15px 15px 5px 15px; 
 
    border-bottom: 2px solid transparent; 
 
} 
 

 
nav a:link { 
 
    color: #000000; 
 
    text-decoration-line: none; 
 
} 
 

 
nav a:nth-of-type(1):hover { 
 
    border-color: rgb(255, 29, 142); 
 
} 
 

 
nav a:nth-of-type(2):hover { 
 
    border-color: rgb(133, 52, 146); 
 
} 
 

 
nav a:nth-of-type(3):hover { 
 
    border-color: rgb(255, 128, 55); 
 
} 
 

 
nav a:nth-of-type(4):hover { 
 
    border-color: rgb(0, 182, 223); 
 
} 
 

 
nav a:nth-of-type(5):hover { 
 
    border-color: rgb(63, 190, 150); 
 
} 
 

 
nav a:nth-of-type(6):hover { 
 
    border-color: rgb(255, 222, 32); 
 
} 
 

 
nav a:hover { 
 
    color: #000000; 
 
}

<header> 
 
<nav> 
 
    <a href="<?php the_permalink(4); ?>#particle-slider">Home</a> 
 
    <a href="#what">What we do</a> 
 
    <a href="#who">Who we are</a> 
 
    <a href="#partners">Who we work with</a> 
 
    <a href="#contact">Say hello</a> 
 
    <a href="<?php the_permalink(70); ?>">Blog</a> 
 
</nav> 
 
</header>

Answer 1

はちょうどそれを割り出し、ビットは答えとして、それを置く当惑が、私はそれだけで見せていた事実によって少しスローされましたSafariのライン。

nav a:hover { 
    color: #000000; 
    text-decoration: none; 
} 

Answer 2

そのはいつもそれをこのように使用するために、より良い、

nav a:hover 
{ 
    color: #000000; 
    text-decoration: none! important; 
    }