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模式下不起作用，我需要它在怪癖中工作，因为eBay产品列表的工作方式。

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

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

任何想法我做错了什么？或者更好的解决方案呢？

Answer 1

你正在使用过渡，这是一个仅在IE10 ......

之后才支持的CSS3元素

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

另请参阅here了解解决方法......

CSS手风琴菜单，在IE Quirks模式下无效

1 个答案: