CSS-导航标签在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;
  }