在悬停时应用于文本的奇怪笔画

Question

嘿伙计们，我发生了一个奇怪的css怪癖，我似乎无法找到罪魁祸首。我在基于图像的背景上显示了一些li链接，当我悬停链接时，它们会改变颜色，但是所有类型都应用了一个看起来很糟糕的白色边框。

我在我的项目中添加了一个normalize.css样式表，希望它会杀死任何应用它的标准样式，但这似乎不起作用。有谁知道为什么会这样？

这是我导航的样式

导航CSS

nav {
    width: 100%;
    position: fixed;
    top: 20;
    z-index: 2;
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}

导航HTML

<nav>
  <ul>
    <li><a ui-sref="about">About</a></li>
    <li><a ui-sref="menu">Menu</a></li>
    <li><a ui-sref="delivery">Delivery Locations</a></li>
    <li><a ui-sref="contact">Contact</a></li>
  </ul>
</nav>

Answer 1

经过调查，我发现问题只是......你有重复的导航栏！

由于导航栏位于fixed位置，因此两者都位于同一位置。因此，当您在前导航栏中悬停链接时，它会变黑。但是后面的相同链接仍为白色，因此会产生奇怪的笔触。

以下是一个可以重现您的问题的演示：

body { background:#111; }

nav {
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 20px; /* was missing a unit (px) */
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}

<!-- stroke you say? -->
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

<!-- who's behind me? -->
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

解决方案：只需删除重复的导航栏......简单的错误。

body { background:#111; }

nav {
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 20px; /* was missing a unit (px) */
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}

<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

jsFiddle： https://jsfiddle.net/azizn/bf28e5g9/

注意<app-navbar>在代码中出现两次的方式：