Question

我有一个问题。我们在悬停效果上创建了一个带有线条动画的菜单栏，但是这个动画在safari 5.1.7中不正常工作，而且在Chrome网页浏览器上也有一些错误，比如当我们悬停任何链接时，菜单行也会闪烁一些微小的1px白色点也在那里： -

Html代码： -

<nav id="bannerNav">
 <ul>
    <li class="active"><a href="who-we-are.html"><span>Menu Bar 1</span> <b></b></a></li>
    <li><a href="our-group-companies.html"><span>Menu Bar 2</span> <b></b></a></li>
    <li><a href="annual-report.html"><span>Menu Bar 3</span> <b></b></a></li>
    <li><a href="social-responsibility.html"><span>Menu Bar 4</span> <b></b></a></li>
    <li><a href="media-news.html"><span>Menu Bar 5</span></a></li>
</ul>
</nav>

Css代码： -

body{background-color: #000000;}
#bannerNav{margin-top: 26px; float: right;}
#bannerNav ul{float: right; margin: 0; padding: 0; font-size: 17px;}
#bannerNav ul li{float: left; margin: 0; position: relative; list-style: none; }
#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px;}
#bannerNav ul li b{background: #fff;  color: #fff;  height: 15px; right:0px; position: absolute; top: 9px; width: 1px;}
#bannerNav ul li:hover b, #bannerNav ul li.active b{display: none;}

请在此处查看完整的工作代码： - Jsfiddle

Answer 1

您可以将backface-visibility添加到行#bannerNav ul li a，并在Chrome上修复，修改后的行：

#bannerNav ul li a{color: #ffffff; padding: 7px 10px; border: solid 1px rgba(0,0,0,0); margin-left: -3px;backface-visibility: hidden;-webkit-backface-visibility: hidden;}

Answer 2

将这些css复制到您的代码中，它可以正常工作。

#bannerNav a:before {
    background: white none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -ms-transform: translateY (0%);
    -webkit-transform: translateY (0%);
    -moz-transform: translateY (0%);
    -o-transform: translateY (0%);
    transform: translateY(0%);
    transition: all 0.3s ease 0s;
    width: 1px;
}
#bannerNav a:after {
    background: white none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    -ms-transform: translateY (0%);
    -webkit-transform: translateY (0%);
    -moz-transform: translateY (0%);
    -o-transform: translateY (0%);
    transform: translateY(0%);
    transition: all 0.3s ease 0s;
    width: 1px;
}

css菜单边框动画无法正常工作

2 个答案: