Internet Explorer 7中的下拉菜单爆炸
我使用下拉菜单创建设计，并且在现代浏览器（例如Firefox，Chrome，Opera，Safari和IE9）中一切运行良好。 但是，由于访问者使用IE7和IE8的人数，我还需要使菜单与这些版本的Internet Explorer兼容。
这是下拉菜单（小提琴，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: " 0A0 0A025BC";
}
a {
color:#0000aa;
background-color:inherit;
}
在IE7和IE8中截图
我在IE开发工具中测试了向后兼容性：
<ul>列表被移位，导航不可能 我试图修改这个答案中建议的样式，但没有成功。
那么，有没有人知道如何解决这些问题？
总的来说，你的问题是你正在使用的CSS比你需要支持的某些浏览器更先进。 在较旧的浏览器中，圆角和大多数伪元素都有点支持。
我注意到你的箭头在IE7中缺失，这是我的线索。 IE7不支持伪类元素：after。 这里有一个有用的参考页面来检查某些CSS http://kimblim.dk/css-tests/selectors/的浏览器支持。
Quirksmode.org是一个很好的兼容性资源。 这里有特定的页面：在http://www.quirksmode.org/css/beforeafter.html之后
链接地址: http://www.djcxy.com/p/42001.html