添加负上边距后导航项目闪烁答案

【问题标题】：Nav item flickering after adding negative top margin添加负上边距后导航项目闪烁
【发布时间】：2014-05-26 19:35:19
【问题描述】：

我试图摆脱我在我的项目中添加负上边距（以便它在我的导航栏上方可见）后得到的闪烁。这是 JSFiddle 的链接：http://fiddle.jshell.net/xv6mk/。
和代码以防万一。
HTML：

<ul>
        <li>Main</li>
        <li>Subpage 1</li>
        <li>Subpage 2</li>
        <li>Subpage 3</li>
        <li>About</li>
</ul>

还有 CSS：

ul {
display: inline;
list-style: none;
}
li {
font-size: 16px;
display: inline-block;
margin-right: -6px;
padding: 16px;
cursor: pointer;
display:inline-block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
li:hover {
background: white;
color: #74DF00;
border-top: 10px solid #525458;
margin-top: -10px;
}

我将非常感谢帮助 :) 。

编辑：将这 2 行添加到

项目（不仅仅是悬停）就像魅力一样。谢谢：）。

border-top: 10px solid #848484;
margin-top: -10px;

【问题讨论】：

@DanielLisik 也许border-color:transparent 会比#fff 更好，以防后面的页面bg 颜色改变：D？

标签： html css html-lists navbar flicker

【解决方案1】：

问题是转换属性，你正在转换所有东西，试试下面的：

transition-property: color, border-top, background;

只需添加跨浏览器支持的前缀即可。

小提琴：http://fiddle.jshell.net/xv6mk/3/

【讨论】：