IE7兼容性问题与导航下拉列表 [英] IE7 Compatibility Issue with Navigation Drop-Down

问题描述

我正在为仍然只使用IE7的组织构建一个网站。在我的笔记本电脑上创建此下拉菜单时，菜单可以正常运行。但是，在IE7浏览器上第一次尝试它时，它不起作用。

css代码：

I am building a website for an organization that still only uses IE7. When creating this drop down menu on my laptop, the menu works without a problem. However, when trying it for the first time on a IE7 browser, it does not work.
css code:

div.hideSkiplink
{
    background-color: #2d4830;
    width: 100%;
    position:relative;
    z-index:2


}

div.menu
{
    padding: 4px 0px 4px 8px;
   position:relative;
    z-index:1

}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;

}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #46714b;
    border: 1px #4e7d62 solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #46714b;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #46714b;
    color: #cfdbe6;
    text-decoration: none;
}

当打开IE7浏览器下拉列表时会显示页面右侧页面...页面将被保留sid e ...滚动栏...出现在导航mENU ...如何解决这个问题...

when open the IE7 Browser dropdown wil come Total right side of the page.. page will be left side... scroll thebar.. appear on Navigation mENU...how solve this problem...

推荐答案

好的，经过一些研究得益于斯科特的关于IE7 z-index的问题的建议，我找到了解决方案

麻烦是我的包含元素（div＃header和div #mainContent）需要为IE7分配z-index值来解析这个问题。



IE z-index问题：

我真的很喜欢这个下拉菜单，在Firefox中（几乎总是如此）一切正常。但后来我在IE中测试过。源代码类似于这个

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.

The IE z-index issue:
I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this

<div id='header'>
    <div id='nav' class='sf-menu'>Here the menu</div>
</div>
<div id='content'>Here the content</div>

标题和内容div有位置：相对。在IE中，下拉菜单显示在内容div下，因此虽然菜单列表的z-index设置为100，但下拉列表中的链接无法点击。



修复是如此简单：

Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.

The fix is so simpel:

#header {
    z-index:2;
}
#content {
    z-index:1;
}

这篇关于IE7兼容性问题与导航下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！