Javascript 仅在IE7中显示/隐藏div问题

我想知道是否有人能帮忙？我自己也试了又试，想找到一个解决办法，但似乎什么都不管用

我有一个水平列表，当用户单击其中一个链接时，列表下方会出现一个隐藏的div，填充整个容器的宽度（950px）

这在Firefox、Safari和IE8上完全有效，但在IE7上似乎不起作用（可能更少，我还没有检查过）

在IE7中，div会导致列表中断，将最后一个列表项拖到一个额外的行上，并（因此，我想？）将div进一步推到页面下方，因此它不会与列表底部齐平。事实上，它正好出现在ID为“highlightsbar”的div下方

这里是相关的代码-我将永远感谢任何人可能有任何建议

您可以在上看到此问题“正在运行”。（有趣的是，如果我只使用相关的代码位进行快速测试，问题就不存在了。我不确定这是否有用？！）

谢谢

马丁

HTML:

JavaScript:

<script type="text/javascript" language="javascript">
function toggle(id)
{
    el = document.getElementById(id);
    var display = el.style.display ? '' : 'none';
    el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}

</script>

功能切换（id）
{
el=document.getElementById（id）；
变量显示=el.style.display？“”：“无”；
el.style.display=显示；
}
window.onload=function（）
{document.getElementById（'submenu'）.style.display='none'；}

如果你把它拔出来，它就会工作，那么它一定是周围代码中的某个东西

非javascript IE兼容性最常见的问题是IE将以不同于其他浏览器的方式处理额外的打开标记和关闭标记

---

我建议您仔细查看html，或者有选择地添加回html，直到可以复制。

我建议您考虑使用IE7（如果可能的话，请忘记IE6）。以下是我在IE7副本中获得的代码：

---

所发生的事情是，您不应该将子菜单代码放在

#navbar

（即，关闭
#navbar
（

）中，然后放入子菜单的代码中）并且每当我对包含

浮动
内容的
位置：relative
的容器有问题时，我将容器更改为使用
position:absolute
，并从那里开始工作（仅在IE7的条件包含中）。
1-如果您将ul的宽度设置为100%，它将解决最后一个列表项“About”将自身向下推到第二行的问题

2-关闭您的ul。在IE9中，div#子菜单是ul的子菜单，而在IE7中，它是最后一个li的子菜单

3-div#navbar{position:relative；}-div#子菜单{position:absolute；top:15px；right:1px；}-适用于IE7

这是我想出的解决办法

首先，我为子菜单创建了一个额外的div，名为
#submenu outer
：

#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}

然后，我将
#子菜单
显示在100%外部分区的中心：

#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px; 
text-align:left;
}

瞧！感谢所有一路上帮忙的人！：）
 您的HTML结构有点奇怪，当单击“按国家/地区浏览”时，您正在显示/隐藏
#子菜单
，但它位于“关于”的LI中。我还建议您使用
position:absolute#子菜单上选择code>。如果您将ul的宽度设置为100%，它将解决最后一个列表项“关于”向下推到第二行的问题。感谢@Hogan和@Circurbreed，尽管我仔细检查了我的代码和
#子菜单
似乎不在
中。我已经更新了CSS使用
position:absolute位置：绝对的
——它在FF4和IE8中的工作方式是一样的，只是在IE7中没有。Grrr！；）关闭您的ul。在IE9中，div#子菜单是ul的子菜单，而在IE7中，它是最后一个liThanks的子菜单！我终于破解了！1.为子菜单创建了一个额外的div-名为
#子菜单外部
：#子菜单外部{位置：绝对；宽度：100%；左侧：0；显示：块；文本对齐：中心；边距：35px 0；z索引：5000；}2。使
#子菜单
显示在100%外部分区的中心：#子菜单{背景：url（'）左下重复-x；左边距：自动；右边距：自动；填充：0 0 0 50px 0；宽度：950px；文本对齐：左；}等等瞧@Martin-您应该将其作为解决方案发布和/或更新jsFiddle（），并发布指向它的新链接。显然，我必须等待将我的解决方案标记为答案，但我会这样做（并且我会更新JSFIDLE（顺便说一下，这是一个非常聪明的工具！）。再次感谢你的帮助。
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}

#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px; 
text-align:left;
}