jquery - 由于 <a> 标签上的显示 block ，fadeToggle() 在 chrome/safari 上失败

Question

http://jsfiddle.net/GGsEt/3/

适用于 Firefox

HTML

<ul>
    <li class="lib_undefined">
       <span class="hidden_toggle">
           <a href="/">Test</a>
       </span>
    </li>
</ul>
​

CSS

.hidden_toggle{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #999;
    line-height: 80px;
    display: none;
}
    .hidden_toggle a{
        color: #999;
        border: none;
        display: block;
        width: 100%;    
        height: 90px;
    }

.lib_undefined{
    min-height: 90px;
    border: 1px solid #000;
}

jQuery

$('.lib_undefined').hover(function(){
     $(this).children('.hidden_toggle').fadeToggle();
});​

有任何已知的修复吗？ a标签需要填充整个li，这就是display设置为block的原因。

Answer 1

当fadeToggle()工作时，它添加了display: inline CSS到淡入淡出元素。您可以使用一些 block 元素，例如 div/p 来包装您的 a。

直接使用

display: inline-block 到 .hidden_​​toggle a 并希望您的问题能够解决。

即。

.hidden_toggle a {
    color: #999;
    border: none;
    display: inline-block; // change here
    width: 100%;    
    height: 90px;
}

<强> DEMO

注意

尽管 display: inline-block 对于旧版 IE 会失败。