Question

我构建了一个简单的下拉菜单，但在Chrome中悬停时标签的大小减少了3px。（跳跃效应）

我不明白问题出在哪里，这是我的css：

#primary {
    width:400px;
    background:yellow;
    height:48px;
    margin:0;
    padding:0;
}

#primary li {
    display:table;
    width:120px;
    float:left;
    border-right:1px solid blue;
    position:relative;
}

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
}

#primary #secondary {
    display:none;
    margin:0;
    padding:0;
}

#primary li:hover #secondary {
    position:absolute;
    top:48px;
    left:0;
    background:red;
    display:block;
}

似乎Chrome增加了额外的隐藏边距/填充..在FF中，IE正在运行。

在线演示：http://jsfiddle.net/A3XDR/

Answer 1

变化：

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
}

到

#primary li a { 
    display:block;
    text-align:center;
    height:48px;
    line-height: 48px;
}

如果您想保持垂直对齐并table-cell，可以添加width: 100%：

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
    width: 100%; 
}

Answer 2

这应该可以解决问题，但我不确定为什么它会像这样。这肯定是因为次要的ul但不确定原因。

#primary li a { 
    display:table-cell;
    text-align:center;
    height:48px;
    vertical-align:middle;
    width:100%;
}

<强> Fiddle

Answer 3

找到了一种方法，但它涉及更改标记，在链接中添加span：

HTML：

<ul id="primary">
    <li>
        <a href=""><span>Nav 1 is long and wraps some</span></a>
        <ul id="secondary">
            <li><a href="">Nav 1-1</a></li>
            <li><a href="">Nav 1-2</a></li>
            <li><a href="">Nav 1-3</a></li>
            <li><a href="">Nav 1-4</a></li>
        </ul>
    </li>
    <li><a href=""><span>Nav 2</span></a></li>
    <li><a href=""><span>Nav 3</span></a></li>
</ul>

CSS：

#primary li a { 
    display:table;
    height:48px;
    width: 100%;
}

#primary li a > span {
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    width: 100%;
}

Fiddle | JSBin（对于IE8测试，jsFiddle在IE8上不起作用）

（如果表格中的表格困扰您，您也可以将#primary li更改为display: block;似乎有效：Fiddle | JSBin）

对于仅使用简单width: 100%的旧版Chrome（~v26），或者使用长的导航条目，即使在当前的Chrome（~v32）上也包含哪些内容，我也没有跳过。在Firefox，IE8，IE10，Opera和Midori中似乎也很开心。

（由于方向putvande和Lokesh指向，此解决方案仅。请显示您对其工作的支持。）

Chrome缩小了<a> tag on hover</a>的宽度

3 个答案: