Question

我只在Chrome内部遇到问题，在Opera，FF，Safari中进行了测试，这一切都运行良好。

我知道Chrome 17存在一个错误，在访问过的链接上有转换，因此我甚至将认为是修复

对于border-bottom，悬停时仍然没有动画转换。

任何线索？我只是没有看到什么？我已经读完了，这一切似乎都在谈论文本的颜色，而我正试图过渡到边框颜色。

我试图在border-bottom中从no到1px solid＃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;
}

Answer 1

只是按照<li>样式设置样式，使用宽度/高度/填充/边框等设置样式，然后只需设置链接以填充li并仅设置链接颜色和字体属性。 Chrome在边框底部有一个小错误，用于链接转换

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;
}

看看这是否有效，如果没有，我将尝试构建类似的东西，并在解决方案上工作。

Answer 3

我在Bootstrap 4导航栏组件中遇到了这个问题。我的菜单链接从底部开始，从第二个开始，在移动设备上打开菜单时都看不见。使用transform: rotate(0);将其固定在边框底部的元素上。

Chrome CSS3 border-bottom过渡错误

3 个答案: