CSS - 在 Safari 中导航标签有下划线答案

【问题标题】：CSS - Nav a tags have underline in SafariCSS - 在 Safari 中导航标签有下划线
【发布时间】：2017-10-27 05:09:03
【问题描述】：

我的导航栏上的<a> 标签有一个链接下划线，它只显示在 Safari 上。我该如何摆脱它？我已经有text-decoration: none; 应该删除它但它不是。以前没见过 -

紫色线是border-bottom，它是我需要删除的直接黑色下划线。

这是我的代码 -

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>

【问题讨论】：

为什么需要border-bottom: 2px solid transparent;？
@IlyaBursov 对于颜色编码的下划线。

标签： html css wordpress safari

【解决方案1】：

只是想出来，把它作为答案有点尴尬，但我有点被它只在 Safari 中显示这条线的事实所震惊。

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

【讨论】：

我认为使用 !important 会更好，因为这样以后它不会被其他 UI 渲染

【解决方案2】：

这样使用总是更好，

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

【讨论】：