CSS下拉菜单在Internet Explorer 7中爆炸 [英] 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

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