Internet Explorer 7中的CSS下拉菜单爆炸 [英] CSS drop-down menu explosion in Internet Explorer 7

问题描述

我使用下拉菜单创建了一个设计，并且在现代浏览器（即Firefox，Chrome，Opera，Safari和IE9）中都能正常工作。然而，由于使用IE7和IE8的访问者的数量，我还需要使这些菜单兼容这些版本的Internet Explorer。

这是下拉菜单菜单（，但没有成功。

那么，有没有人知道如何解决这些问题？

解决方案

总的来说，您的问题是，您使用的CSS比您需要支持的某些浏览器更高级。

我注意到IE7中缺少你的箭头，这是我的线索。 IE7不支持伪类元素：after。这是一个有用的参考页面，用于检查某些CSS的浏览器支持 http://kimblim.dk/css-测试/选择器/ 。

Quirksmode.org是一个很好的兼容性资源。这里有专门针对： http://www.quirksmode.org/css/beforeafter.html

I am creating a design with a drop-down menu and everything works well in modern browsers (i.e. Firefox, Chrome, Opera, Safari, and IE9). However, due to to the number of visitors using IE7 and IE8, I also need to make the menu compatible with those versions of Internet Explorer.

Here is the drop-down menu (fiddle, pastebin):

HTML

<ul class="menu_top">
    <li><a href="/" title="Home" class="selected">Home</a></li>
    <li><a href="/Help_Videos" title="Help Videos" class="haschildren">Help Videos</a><ul>
        <li><a href="/Child_Page" title="Child Page">Child Page</a></li>
        <li><a href="/Site_Map" title="Site Map" class="haschildren">Site Map</a><ul>
            <li><a href="/Galleries" title="Galleries">Galleries</a></li>
            <li><a href="/Missing" title="Missing">Missing</a></li></ul>
        </li></ul>
    </li>
    <li><a href="/About" title="About" class="haschildren">About</a><ul>
        <li><a href="/Contact" title="Contact">Contact</a></li></ul>
    </li>
</ul>

CSS

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover,
ul.menu_top a.haschildren.childselected,
ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content: "\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}

Screenshot in IE7 and IE8

I have tested the backward compatibility in IE Developer Tools:

• IE7: The <ul> lists are displaced and navigation is impossible
• IE8: Only missing round corners (this is a minor problem)

I tried to modify the style as advised in this answer, but not successfully.

So, does anybody have any idea how to fix these issues?

解决方案

Overall, your issue is that the CSS you are using is more advanced than some of the browsers you need to support. Rounded corners and most pseudo elements have spotty support in older browsers.

I noticed that your arrow is missing in IE7, that was my clue. IE7 does not support the pseudo-class element :after. Here is a helpful reference page to check on browser support of certain CSS http://kimblim.dk/css-tests/selectors/.

Quirksmode.org is a good resource for compatibility. Here is there page specific to :after http://www.quirksmode.org/css/beforeafter.html

这篇关于Internet Explorer 7中的CSS下拉菜单爆炸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！