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

如果你把它拉出来并且它有效，那么它必须是周围代码中的东西。

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

我建议您仔细查看html，或者选择性地添加HTML，直到您可以重现。

Answer 2

我建议你考虑使用conditional-includes用于IE7（如果可能的话，忘记IE6）。这是我在IE7副本中使用的代码的jsFiddle：http://jsfiddle.net/qjx4g/2/

发生了什么事情，您不应该在#navbar <ul>中使用子菜单代码（即关闭#navbar </ul>，然后放入子菜单代码），每当我遇到position: relative包含float内容的容器的问题时，我将容器更改为使用position: absolute并从那里开始工作（仅在条件包含中）对于IE7）。

Answer 3

1 - 如果你给你的ul宽度为100％，它解决了最后一个列表项“关于”将自己推到第二行的问题。

2 - 关闭你的ul。在IE9中，div＃submenu是ul的孩子，而在IE7中它是最后一个孩子的

3 - div＃navbar {position：relative;} - div＃submenu {position：absolute;上：15px;右：1px;} - 适用于IE7

pic

Answer 4

这是我提出的解决方案。

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

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

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

#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;
}

瞧瞧！感谢所有帮助过的人！：）

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

4 个答案: