正如你在[this] [1]中看到的那样,在悬停状态下,a
的悬停状态总是比ul高一个像素。 (你可以在小提琴中看到这一点:它甚至超越了ul
的边界)这只发生在Chrome中(也在FF en IE10中测试过,但它们没有这个问题)。任何解决方案?
注意:overflow: hidden
不是解决方案,因为我希望溢出对其他内容(子菜单等)可见。
ul {
list-style: none;
text-align: center;
background: whiteSmoke;
border: 1px solid red;
}
li {
display: inline-block;
font-size: 150%;
position: relative;
margin: 0;
}
li a {
color: #555;
text-decoration: none;
text-shadow: 0 2px 0 white;
display: block;
padding: 0.2em 0.5em 0.3em;
}
li a:hover {
color: black;
background: whiteSmoke;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.125);
}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li class="has-sub-menu"><a href="#">Contact</a></li>
</ul>
</nav>
答案 0 :(得分:-1)
如果您的菜单在Chrome中低一个像素;有两种浏览器特定的方法只能在Chrome中应用矫正样式。 See Similar Post Answered
<强> CSS 强>
@media screen and (-webkit-min-device-pixel-ratio:0) {
position:relative;top:-1px;
}
<强> JS 强>
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify menu styling
}