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

Question

我想知道某人是否能够提供帮助？我已经尝试过并尝试自己找到解决方案,但似乎没有任何效果.

我有一个水平列表,当用户点击其中一个链接时,隐藏的div会出现在列表的正下方,填充整个容器的宽度(950px).

这在Firefox,Safari和IE8上绝对完美,但似乎不适用于IE7(可能更少,我无法检查).

在IE7中,div导致列表中断,在额外的行上进行最终列表项的操作(因此,我推测？)将div推到页面的下方,因此它不会与列表的底部齐平.实际上,它似乎位于div下方,ID为"highlightbar".

这是相关的代码 - 我会永远感激任何人可能有的建议!

您可以在http://www.totalbackpacker.co.uk上看到这个问题"在行动中" .(有趣的是,如果我只使用http://www.martinjefferies.co.uk/test.html上的相关代码进行快速测试,问题就不存在了.我不确定这是否有帮助？!)

谢谢,

马丁

HTML:

<div id="outer">

<div id="wrapper">

<div id="header">
</div>

<div id="navbar">

<ul>
<li class="left"><a href="#" title="Home"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></a></li>
<li><a href="#" title="Explore by country" onClick="toggle('submenu')"><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></a></li>
<li><a href="#" title="Search"><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></a></li>
<li><a href="#" title="Contact"><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></a></li>
<li class="right"><a href="#" title="About"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></a></li>

<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">

<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br /><a href="#" title="Close menu" onClick="toggle('submenu')">Close menu</a>
</div>
</div>

</ul>
<div class="clearer"></div>

<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->

<div id="content">

</div>

</div>

</div>

CSS:

#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}

#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}

#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}

#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}

#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}

#navbar li {
float:left;
}

#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}

#navbar li a:hover {
background:#cc0000;
}

#navbar img {
border:0;
}

#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}

#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}

#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}

.clearer {
clear:both;
}

#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}

#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}

#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}

#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}

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>

Answer 1

这是我想出的解决方案。

\n\n

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

\n\n

#submenu-outer {\nposition:absolute;\nwidth:100%;\nleft:0;\ndisplay:block;\ntext-align:center;\nmargin:35px 0 0 0;\nz-index:5000;\n}\n

\n\n

然后我让它#submenu出现在 100% 外部 div 的中心：

\n\n

#submenu {\nbackground:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/\xe2\x80\xa6;) left bottom repeat-x;\nmargin-left:auto;\nmargin-right:auto;\npadding:0 0 50px 0;\nwidth:950px; \ntext-align:left;\n}\n

\n\n

等等瞧！感谢一路上给予帮助的所有人！:)

\n