jquery - CSS Accordion 菜单，在 IE Quirks 模式下不起作用

Question

这是我正在使用的:

<style>
    html {
  background:#4d4d4d;
}

#accordion .item {
    width: 194px;
    max-height: 33px;
    background:lightsalmon;
    overflow: hidden;
    margin-bottom:5px;
    transition: max-height .5s;
    -o-transition: max-height .5s;
    -moz-transition: max-height .5s;
    -webkit-transition: max-height .5s;
}

#accordion a {
    display:block;
    height:auto;
    width:184px;
    line-height:33px;
    padding-left:10px;
    color:#000000;
    text-decoration:none;
    font-weight: bold;
}

#accordion .item:hover {
    max-height:396px; /* Set to height of the longest sub-menu for best results */
}

#accordion .item a:hover {
    background:#FF3333;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}


#accordion .item:hover {
    max-height:396px; /* Set to height of the longest sub-menu for best results */
}

.sub {
    *padding-left:20px !important;
    *overflow:hidden;
    background:#ffffff;
    color:#000000;
    *height:auto !important;
    font-weight:normal !important;
}

</style>

<div id="accordion">
    <div class="item" id="brakes">
    <a href="#">Menu 1</a>
        <a href="#" class="sub">Submenu 1</a>
        <a href="#" class="sub">Submenu 2</a>
        <a href="#" class="sub">Submenu 3</a>
        <a href="#" class="sub">Submenu 4</a>
        <a href="#" class="sub">Submenu 5</a>
        <a href="#" class="sub">Submenu 6</a>
        <a href="#" class="sub">Submenu 7</a>
    </div>
</div>

问题是它在 IE Quirks 模式下不起作用，我需要它在 quirks 下工作，因为 eBay 产品列表的工作方式。

我以为我可以使用 jQuery 设置 css，但它似乎不起作用，这是我的尝试:

<script>
    $('.item').hover(function(){
        $(this).css('max-height','396px');
    });
</script>

知道我做错了什么吗？或者更好的解决方案？

Answer 1

您正在使用过渡，这是一个 CSS3 元素，仅在 IE10 中受支持...

您需要使用外部库，例如 Modernizr , 它检测并添加某些浏览器中缺少的功能...

另见 here解决方法...