css 菜单抖动答案

【问题标题】：css menu jerkinesscss 菜单抖动
【发布时间】：2012-08-30 18:59:41
【问题描述】：

HTML：

<div style="padding-bottom:3px;background:transparent; color:white!important; float:left; margin-right:20px; line-height:42px;">
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px;" href="http://hronline">HROnline</a>
    </span>
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px; " href="http://hronline/ec">Employee Center</a>
    </span>
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px; " href="http://hronline/businesscommunities">Business Communities</a>
    </span>
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px;" href="http://hronline/internalservices">Internal Services</a>
    </span>
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px;" href="http://hronline/policiesprocedures">Policies&procedures</a>
    </span>
    <span class="linkcontainer">
        <a class="hardlink" style="padding:0 10px;" href="http://hronline/qualitybestpractices">Best Practices</a>
    </span>
</div>

CSS：

.hardlink {
    color: #FFF !important;
}      
.hardlink:hover{
    background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px; 
    background-color:#21374c; 
    border:1px solid #5badff;
    display:inline-block; 
    line-height:20px;
}

是什么导致了悬停在每个链接上时整个 div 生涩的行为？

【问题讨论】：

请在 jsfiddle 上做一个演示
使用内联 CSS 以及使用 !important 被认为是不好的做法
我将上面的内容卡在了 JSFiddle 中，无法在 Chrome 中重现。
我以为你会抱怨 css 菜单很粗鲁......

标签： html css styles

【解决方案1】：

您在:hover 上添加border。要解决这个问题 - 只需在正常状态下添加一个透明边框 DEMO

.hardlink {
    color: #fff !important;
    border: 1px solid transparent;
}

【讨论】：