jQuery 下拉菜单 ie9 兼容模式

Posted 2023-03-29

【中文标题】jQuery 下拉菜单 ie9 兼容模式

【英文标题】：jQuery Dropdown menu ie9 compatibility mode

【发布时间】：2012-08-24 05:54:26

【问题描述】：

我创建了一个简单的 jQuery 下拉菜单。在 FF、Chrome、ie9 中工作。但是在ie兼容模式下是不行的。

html：

<div class="navBarCont">
<ul class="navBar gradient shadow" id="navBar">
    <li><a href="index.html">Home</a></li>
    <li class="selected"><a href="about_us.html">About Us</a></li>
    <li><a href="faq.html">FAQs</a></li>
    <li>Upcoming Events / News</li>                    
    <li>Educational
        <ul class="subnav">
            <li><a href="osteooftheknee.html">Osteoarthritis of the Knee</a></li>
            <li><a href="benefitsofexercise.html">Benefits of Exercise</a></li>
            <li><a href="didyouknow.html">Did You Know?</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

JS：

$(document).ready(function()
    $('.navBar li').hover(function () 
        $('ul', this).stop().slideDown(100);
    , function () 
        $('ul', this).stop().slideUp(100);
    ); 
);

CSS：

.navBarCont 位置：相对； 顶部：-15px； z-index：自动； 宽度：714px； 边距：0 自动； 背景：#fff; .navBar 光标：指针； z 指数：95； 位置：相对； 高度：28px； 向左飘浮; 颜色：#ffffff； 字体系列：arial； 字体大小：0.97em； -webkit-border-radius：5px； -moz-边界半径：5px； 边框半径：5px； 背景：#fff; .navBar>li 向左飘浮; 显示：块； 高度：23px； 右边框：细实线#ffffff； 填充：5px 18px 0； 位置：相对； 背景：RGB（109,179,242）； /* 旧浏览器 */ /* IE9 SVG，需要有条件地覆盖 'filter' 到 'none' */ 背景：URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 背景：-moz-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，rgba（109,179,242,1）），颜色停止（50％，rgba（84,163,238,1）），颜色停止（51 %, rgba(54,144,240,1)), color-stop(100%, rgba(30,105,222,1))); /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* 歌剧 11.10+ */ 背景：-ms-线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* IE10+ */ 背景：线性梯度（顶部，rgba（109,179,242,1）0％，rgba（84,163,238,1）50％，rgba（54,144,240,1）51％，rgba（30,105,222,1）100％）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-8 */ 文本对齐：居中； .navBar li:hover, .arthritis .title a:hover 背景：#a5cdef； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* 歌剧 11.10+ */ 背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* IE10+ */ 背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */ .navBar li.selected>a, .navBar li.selected 颜色：#ffffb9； .navBar li.selected 背景：#a5cdef； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上角，左下角，颜色停止（0%，#a5cdef），颜色停止（50%，#4e8edb），颜色停止（51%，#337add），颜色-停止（100%，#163a9e））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* 歌剧 11.10+ */ 背景：-ms-linear-gradient（顶部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* IE10+ */ 背景：线性渐变（到底部，#a5cdef 0%，#4e8edb 50%，#337add 51%，#163a9e 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cdef', endColorstr='#163a9e',GradientType=0); /* IE6-9 */ .navBar>li:last-child 右边界：无； -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; 边框半径：0 5px 5px 0； .navBar>li:first-child -webkit-border-radius：5px 0 0 5px； -moz-边界半径：5px 0 0 5px； 边框半径：5px 0 0 5px； .navBar ul 位置：绝对； 左：0； 文字装饰：无； 列表样式：无； 显示：无； 填充：10px； 文本对齐：左； 边框顶部：无； z 指数：90； 顶部：28px； 颜色：#fff; -moz-border-radius-topleft：0px； -moz-border-radius-topright：0px； -moz-border-radius-bottomright：5px； -moz-border-radius-bottomleft: 5px; -webkit-border-radius：0px 0px 5px 5px； 边框半径：0px 0px 5px 5px； 背景：#6db3f2； /* 旧浏览器 */ 背景：-moz-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* FF3.6+ */ 背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，#6db3f2），颜色停止（100％，#1e69de））； /* Chrome,Safari4+ */ 背景：-webkit-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* Chrome10+,Safari5.1+ */ 背景：-o-linear-gradient（顶部，#6db3f2 0%，#1e69de 100%）； /* 歌剧 11.10+ */ 背景：-ms-线性梯度（顶部，#6db3f2 0%，#1e69de 100%）； /* IE10+ */ 背景：线性渐变（到底部，#6db3f2 0%，#1e69de 100%）； /* W3C */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* IE6-9 */ .navBar 一个 颜色：#fff; 文字装饰：无； .navBar ul li 明确：两者； 向左飘浮; 填充：5px； 右边界：无； .navBar ul li a 颜色：#fff; 文字装饰：无；

【参考方案1】：

试试这个

$(document).ready(function()
    $('.navBar li').hover(function () 
           $('ul', this).stop(true,true).slideDown(100);
, function () 
    $('ul', this).stop(true,true).slideUp(100);
);​
   );