Chrome CSS3边框底部过渡效果问题

Question

我遇到的问题只出现在Chrome中，在Opera、FF和Safari中都可以正常工作。

我知道Chrome 17上有一个与已访问链接转换有关的bug，所以我甚至包括了那个被认为已经修复了

然而，在border-bottom悬停时，转换的动画仍未出现。

有什么线索吗？我是不是没有看到什么？我查阅了一些资料，发现它们都在谈论文字颜色，而我正在尝试过渡到边框颜色。

我试图将border-bottom从none动画到1像素实心#9ecd41，但发现除了Firefox外，所有浏览器都有一个奇怪的抖动动画。

任何帮助都将是很棒的，附上我正在使用的代码。

好的，这是我的HTML代码：

  <nav>
    <ul class="nav">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">MEDIA</a></li>
      <li><a href="#">BLOG</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
 </nav>

以下是我的CSS样式

nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}

ul.nav {
width: auto;
height: auto;
overflow: visible;
}

.nav > li {
display: inline-block;
margin-right: 20px;
}

.nav > li:last-child {
margin-right: 5px;     
}



/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}

/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */

-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}


.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}

.nav > li > a:active {
    border-bottom: 1px solid #f96d10;
}

- Jake Chapman

---

顺便说一句，我甚至在JSfiddle上测试了其他人的代码，它一开始可以工作，然后切换选项卡，再切回来就什么也不行了，没有过渡...甚至没有点击任何链接来创建：visited状态。 - Jake Chapman

我不知道你想让我们做什么。这些是漏洞。这些也是实验性特性。我不会期望它们在所有浏览器中都能完美运行。 - animuson

解决了！我试图回答自己的问题，但我还没有100分。 :) 我只是按照我通常设置li的宽度/高度/填充/边框等样式，然后只是设置链接以填充li，并设置链接的颜色和字体属性。Chrome在链接转换的border-bottom上有小bug。 - Jake Chapman

Answer 1

我只是按照设置

的宽度/高度/填充/边框等方式来设置<li>的样式，然后只需设置链接以填充

并设置链接的颜色和字体属性。Chrome在链接转换的border-bottom上有小错误。

- Jake Chapman

Answer 2

这应该是一个简单的修复。 据我所见，您的问题在于您放置转换的位置。 使用Chrome时，它需要添加到最上层父级。

尝试在此处添加：

.nav > li {
   display: inline-block;
   margin-right: 20px;
}

还要添加-webkit-元素的声明，例如：

.nav > li {
   display: inline-block;
   margin-right: 20px;
   -webkit-transition: all .5s ease-in;
   -moz-transition: all .5s ease-in;
   -o-transition: all .5s ease-in;
   -ms-transition: all .5s ease-in;
   transition: all .2s ease-in;
   -webkit-transition-property: all;
   -webkit-transition-duration: .5s;
   -webkit-transition-timing-function: ease-in;
}

看看这个是否可行，如果不行，我会尝试构建类似的东西并努力解决问题。

- André Swanepoel

Answer 3

我在使用Bootstrap 4导航栏组件时遇到了问题。我的菜单链接有下边框，但在移动设备上打开菜单后，从第二个链接开始下边框都不可见了。 通过在具有下边框的元素上添加transform: rotate(0);来解决这个问题。

- Renan Dias