有谁知道为什么nivo滑块下IE中的下拉菜单消失了?尝试玩z-index,无济于事,我也知道下拉菜单在Flash内容下消失了,但是据我所知,Nivo滑块仅使用jquery,没有Flash,情况并非如此(wmode = transparent) 。
这是HTML:
<table>
<tr height="50"><td colspan="2" align="right" class="bottom_menu">
<ul id="nav" class="dropdown dropdown-horizontal" >
<li><a href="/index.cfm?fuseaction=home.logout" class="dir" style="border:0 !important;" >Çikis</a></li>
<li><a href="/index.cfm?fuseaction=objects2.list_basket" class="dir">Sepetim</a></li>
<li><a href="/index.cfm?fuseaction=objects2.me" class="dir">Sirketim</a>
<ul>
<li><a href="/index.cfm?fuseaction=objects2.list_opportunities">Firsatlar</a></li>
<li><a href="/index.cfm?fuseaction=objects2.form_add_partner">Sirkete Kullanici Ekle</a></li>
<li><a href="/index.cfm?fuseaction=objects2.form_upd_my_company">Kullanici Yönetimi</a></li>
<li><a href="/index.cfm?fuseaction=objects2.list_analyses">Analizler</a></li>
<li><a href="/index.cfm?fuseaction=objects2.list_extre">Hesap Ekstresi</a></li>
<li><a href="/index.cfm?fuseaction=objects2.popup_add_online_pos" target="_blank">Sanal Pos</a></li>
</ul>
</li>
</ul>
</td></tr>
</table>
<div id="banner">
<img src="/documents/templates/projedepo/l_top.gif" style="z-index:1;position:absolute; left:0; top:0;" width="24px" height="24px" border="0" />
<img src="/documents/templates/projedepo/r_top.gif" style="z-index:1;position:absolute; right:0; top:0;" width="24px" height="24px" border="0" />
<img src="/documents/templates/projedepo/l_bottom.gif" style="z-index:1;position:absolute; left:0; bottom:0;" width="24px" height="24px" border="0" />
<img src="/documents/templates/projedepo/r_bottom.gif" style="z-index:1;position:absolute; right:0; bottom:0;" width="24px" height="24px" border="0" />
<div class="banner_img">
<link rel="stylesheet" href="/documents/templates/projedepo/banner/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/documents/templates/projedepo/banner/style.css" type="text/css" media="screen" />
<div id="slider" class="nivoSlider">
<img title="#1" src="/documents/templates/projedepo/banner/canon.jpg" alt="" />
<img title="#2" src="/documents/templates/projedepo/banner/indigovision.jpg" alt="" />
</div>
<div id="1" class="nivo-html-caption">
<a href="/index.cfm?fuseaction=objects2.detail_product&product_id=612&stock_id=612"><img src="/documents/templates/projedepo/banner/daha_fazlasi.jpg" border="0" /></a>
</div>
<div id="2" class="nivo-html-caption">
<a href="/index.cfm?fuseaction=objects2.detail_product&product_id=630&stock_id=630"><img src="/documents/templates/projedepo/banner/daha_fazlasi.jpg" border="0" /></a>
</div>
<script type="text/javascript" src="/JS/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:1000, //Slide transition speed
pauseTime:10000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:1.0, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){} //Triggers when slider has loaded
});
});
</script>
</div>
</div>
这是下拉菜单的CSS:
http://www.micae.com/documents/templates/projedepo/default.css
http://www.micae.com/documents/templates/projedepo/default.advanced.css
http://www.micae.com/documents/templates/projedepo/dropdown.css
对于nivo滑块:
http://www.micae.com/documents/templates/projedepo/banner/style.css
http://www.micae.com/documents/templates/projedepo/banner/nivo-slider.css
对于横幅div:
#banner { position:relative; width:980px; height:435px; background:#fff; margin-bottom:20px; margin-top:-1px; color:#000; z-index:60; }
.banner_img { padding:8px;position:absolute;z-index:2; }
和默认情况下的javascript,jquery和nivo滑块
http://www.micae.com/JS/jquery.nivo.slider.pack.js
我忘记提了,没有定义文档类型,这实际上就是问题所在,有什么想法可以解决吗?我的意思是没有doctype定义。因为当我定义文档类型时,设计完全崩溃了...
最佳答案
IE可以对z-index进行疯狂处理,尤其是在元素未定位的情况下。确保麻烦元素及其所有祖先在css中明确地相对或绝对定位。似乎一旦某个地方的链条断裂,就会创建一个全新的堆叠顺序。
就个人而言,我的默认CSS总是这样:
div, ul, li {position:relative;}
看来解决了很多问题。
关于jquery - nivo滑块和下拉菜单在IE中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4517129/