我有一个下拉菜单,除了Internet Explorer 7外,它运行得很完美。谢谢MS。
出于演示目的,我创建了这个简单的HTML。下拉菜单打开以快速说明问题。在IE 7中,下拉菜单被切割为顶级菜单的宽度。在IE8和IE9中,这不是问题。
我可以通过添加以下javascript来修复此问题:
element.style.width = 320px
完美无缺,但我需要像IE8或IE9那样自动完成,否则我必须分别计算每个下拉宽度。
下面的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
ul.menu {list-style:none;font:10px Trebushet MS;font-weight:bold;margin:0;padding:0;position:absolute;left:86px;top:90px;line-height:100%;height:15px}
ul.menu * {margin:0;padding:0;cursor:pointer}
ul.menu .header {position:relative; float:left;color:#999999;padding: 3px 12px 2px 4px;white-space:nowrap}
ul.menu .header ul {position:absolute; top:15px; left:0;background:#f0f0f0; overflow: hidden;list-style:none}
ul.menu .header ul li {position:relative; padding: 3px 25px 3px 10px; white-space:nowrap; display: block}
ul.menu .header ul li:hover {background-color:#dcdcdc}
</style>
</head>
<body>
<ul class="menu" id="menu">
<li class="header">
CREATE
<ul>
<li>A really really long description of nothing valuable</li>
<li>test1</li>
<li>test2</li>
<li>test3 and again very long</li>
</ul>
</li>
<li class="header">
SEARCH
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</li>
</ul>
</body>
</html>
答案 0 :(得分:1)
为嵌套ul设置的溢出属性是此处的原因。从overflow: hidden
中删除ul.menu .header ul
属性应该更正此问题。
在这里看一个小提琴:http://jsfiddle.net/b45rA/1/embedded/result/。您可能需要使用run again命令(右上角)来渲染输出,因为jsfiddle对IE7不起作用。