我有一个下拉菜单,除了IE6和IE7之外,它可以完美地运行.
这是在Safari/Firefox浏览器中
以下是它在IE6和IE7中的外观
这是它隐藏在IE 6/7下面的div的CSS
#featured-programs-left img, #featured-programs-right img{ overflow:auto; border:0; } #featured-programs-left, #featured-programs-right { height:625px; float:left; overflow:auto; clear:left; clear:right; width:100%; } #featured-programs-left div, #featured-programs-right div { overflow:auto; clear:left; clear:right; width:352px; height:345px; } #featured-programs-left { float:left; } #featured-programs-right { float:right; }
这是jQuery(在源代码中你会看到每个主要div中的多个div(特色 - 程序 - 左和 - 正),并且jQuery在循环中淡入和淡出)以显示多个项目(淡化div内两侧的内容(#featured-programs-leftfeatured-programs-right)
这是快速链接的CSS(快速链接是链接的下拉菜单)
#header-nav-top li#quicklinks a:link, #header-nav-top li#quicklinks a:visited, #header-nav-top li#quicklinks a:active { padding-left: .9em; background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em; } #header-nav-top li#quicklinks.hover { position: relative; } #header-nav-top li#quicklinks ul { position: absolute; display: none; xleft: -9999em; top: 14px; width: 142px; padding:5px 2px 5px 5px; z-index: 90; margin: 0px; background-color: #00693E; xborder: 1px solid #FDBE2F; xborder-width: 0px 1px 1px; } #header-nav-top li#quicklinks:hover ul, #header-nav-top li#quicklinks.hover ul { left: 0px; display: block; } #header-nav-top li#quicklinks ul li { background: transparent none; float: none; margin: 0px 0px 0px; line-height: 1.4em; display: block; border:1px solid #00693E; } #header-nav-top li#quicklinks ul li a:link, #header-nav-top li#quicklinks ul li a:visited, #header-nav-top li#quicklinks ul li a:active { color: #fff; display: block; text-decoration: none; background: transparent none; } #header-nav-top li#quicklinks ul li a:hover { color: #C26B1A; background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px; }
你认为它可能导致它没有在IE 6/7中显示feature-programs-left和featured-programs中的项目的下拉菜单?
您是否尝试将当前模糊菜单的图片的z-index设置为0?你有一个我们可以看到的"实时"测试网址吗?或者,基于IE正在正确处理z-index,您是否有足够的余地将下拉菜单的HTML放在页面中的其他元素之后,从而绕过z-index?
编辑:啊,显然有一个错误.这个链接可能会解释,如果没有实际帮助......
来自MrTazz的报价:
当运行一些特殊的JavaScript时,它会将div放在后台.改变div,它回到了远方.
那么也许尝试在页面显示之前以某种方式更新下拉菜单div?
编辑: 从布拉德的评论,复制在这里为未来的读者的启发:"这帮助我:http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/我设置#header到z-index为2,而#content的z-index为1." - 布拉德(5小时前)
因此,总结一下:IE 6/7中存在z-index错误.为了解决这个问题,明确将菜单前面出现的元素的z-index设置为较低的数字(例如1),并将菜单容器的z-index设置为稍高一些数字(例如2).