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

我有一个问题。我们在悬停效果上制作了一个带有线条动画的菜单栏，但该动画在safari 5.1.7中无法正常工作，并且在chrome web浏览器上也出现了一些错误，例如当我们悬停任何链接时，第四个菜单线会闪烁，还有一些带有白色圆点的小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>

---

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

您可以将

背面可见性

添加到行

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

---

将这些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;
}

---

出于兴趣，你的Safari 5.1.7已经5年了，怎么还支持它呢？说真的，没有人在使用Safari 5…它实际上像IE5oky一样是一个死气沉沉的浏览器，谢谢，但在chrome浏览器中出错是的闪烁错误是reslove，但白点仍然存在，知道吗？如何删除？我将检查并查看如何通过更改字体大小来帮助我修复圆点问题16px替换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;
}