0

我目前正在构建一个网站，它使用 Projekktor 播放电影和 JQuery 几乎所有其他内容，即导航、显示面板等。开发链接是 - http://www.hundredframes.com/dev/home/

我的网站可以在 Firefox、Chrome、Safari 和 Opera 上运行。但与往常一样，IE 让我陷入了困境。我正在使用 IE 矩阵过滤器来倾斜文本并使用 Cufon 来呈现字体。工作流程是 - 用户单击链接。如果它有子菜单，则子菜单的第一项将突出显示，并显示该链接的内容。

目前在 IE7 中，显示第一个子菜单链接的内容，但不显示子菜单的链接，因此用户无法导航到任何其他子部分。我还为链接使用了背景图像，以避免与 IE7 中的倾斜文本相关的别名问题。奇怪的是，当您单击导演部分中的缩略图时，会显示列出导演的子菜单。

我认为这与 z-index 堆叠顺序有关，尽管我已经为所有元素分配了 z-index 值。菜单代码如下：

---------------HTML------

<ul id="menu" class="left">
    <li id="direct">
        <a href="#" id="direct-lnk" onClick="return false;" title="Directors">directors</a>
        <ul class="list">
            <li id="vishal"><a href="#" id="vishal-lnk" onClick="return false;" title="Vishal Punjabi">vishal punjabi</a></li>
            <li id="shiraz"><a href="#" id="shiraz-lnk" onClick="return false;" title="Shiraz Bhattacharya">shiraz bhattacharya</a></li>
            <li id="roshan"><a href="#" id="roshan-lnk" onClick="return false;" title="Roshan Shetty">roshan shetty</a></li>
            <li id="saurabh"><a href="#" id="saurabh-lnk" onClick="return false;" title="Saurabh Ghosh">saurabh ghosh</a></li>
            <li id="mark"><a href="#" id="mark-lnk" onClick="return false;" title="Mark Toia">mark toia</a></li>
            <li id="alejandro"><a href="#" id="alejandro-lnk" onClick="return false;" title="Alejandro Toledo">alejandro toledo</a></li>
            <li id="claude"><a href="#" id="claude-lnk" onClick="return false;" title="Claude Genton">claude genton</a></li>
            <li id="tim"><a href="#" id="tim-lnk" onClick="return false;" title="Tim Gibbs">tim gibbs</a></li>
                    </ul>
                </li>
    <li id="about"><a href="#" id="about-lnk" onClick="return false;" title="About us">about us</a></li>
    <li id="production">
        <a href="#" id="production-lnk"  onclick="return false;" title="Production services">production services</a>
        <ul class="list">
            <li id="locations"><a href="#" id="locations-lnk" onClick="return false;" title="Locations">locations</a></li>
            <li id="casting"><a href="#" id="casting-lnk" onClick="return false;" title="Casting">casting</a></li>
            <li id="crews"><a href="#" id="crews-lnk" onClick="return false;" title="Crews">crews</a></li>
            <li id="equipment"><a href="#" id="equipment-lnk" onClick="return false;" title="Equipment">equipment</a></li>
            <li id="post-prod"><a href="#" id="post-prod-lnk" onClick="return false;" title="Post production">post production</a></li>
        </ul>
    </li>
    <li id="get"><a href="#" id="get-lnk" onClick="return false;" title="Get in touch">get in touch</a></li>
</ul>

下面是 IE7 的 CSS

IE7 CSS

#menu{ 
    margin:0 auto; 
    list-style-type:none; 
    padding:103px 0 20px 0; 
    background:url(../img/layout/menu-line.gif) repeat-y 8px 0; 
    height:auto; 
    min-height:250px; 
    max-height:515px; 
    width:auto; 
    min-width:180px; 
    position:relative; 
    z-index:-1 !important; 
}

#menu > li{ 
    margin-left:4px; list-style-type:none;
    position:relative;
    height:auto; min-height:25px; width:210px;
    margin:10px 0;
}

#menu > li > a{ 
    display:block; 
    width:210px; 
    height:auto; 
    overflow:hidden; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px 0; 
    font:1.75em/1em "Carbon Block"; 
    letter-spacing:0.015em; 
    color:#46c5e1; 
    text-transform:uppercase; 
    padding-left:20px; 
    position:absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-        0.21255656167002124, M22=1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}

#menu > li > a:hover{ 
    color:#ff9711; 
    background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
}

#menu > li > a.sel{ 
    color:#ff9711; background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px; 
}

#menu > li > ul{ 
    display:none; 
    width:auto; 
    height:auto; 
    list-style-type:none; 
    margin:30px 0 10px 20px; 
    position:relative; 
    z-index:999;
}

#menu > li > ul > li{ 
    width:200px; 
    height:20px; 
    list-style-type:none; 
    position:relative; 
    padding-left:40px; 
    top:0; left:0; 
    z-index:990; 
}

#menu > li > ul > li:hover{ 
    color:#ff9711; 
}

#menu > li > ul > li > a{ 
    display:block; /*text-indent:-5000px;*/ 
    z-index:999; 
    position:absolute; top:0; left:0; 
    font:1.25em/1em "Carbon Block"; 
    letter-spacing:0.015em; color:#58585a;                                 
    background:url('../img/layout/anchor-bg.jpg'); 
    text-transform:uppercase; 
    height:20px; width:200px; z-index:999 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}

#menu > li > ul > li > a:hover{ 
    color:#ff9711; 
}

#menu > li > ul > li > a.sel{ 
    color:#ff9711; 
}

对此的任何帮助都会很棒，因为我已经尝试了所有可能让子菜单在 IE7 中显示，但我已经没有选项了。我可以回退到使用图像并整体避免歪斜、Cufon 等，但我不确定它是否能解决子菜单显示问题，这将是我的最终选择。

另外，我正在使用 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 来强制 IE 进入 IE7 模式，如果这有影响的话。

最好的，萨加尔

4

1 回答 1

0

我得到了在 IE 中工作的菜单。

您需要zoom:1为菜单列表项添加 CSS，否则布局会变得一团糟。

于 2011-06-14T09:06:45.813 回答