标题在IE 7-8中搞砸了

Question

我正在处理的页面在Chrome，Firefox，Opera和Safari（Mac和Windows）中完美展示，除了 IE 7＆amp; 8 即可。标题看起来像这样：

但在IE中看起来像这样：

之前我们在position: relative;文件中使用container作为我们的班级charity.css，但我不得不删除它，因为它在我的下拉菜单中创建了IE的问题。

有人可以帮帮我吗？！我现在非常想法:(

以下是[页面]（但是，我将不得不在以后删除该链接）任何帮助将非常感谢!!

编辑：这里是jsfiddle：http://jsfiddle.net/walahh/QwFL6/它不是完全相同的页面......但希望你会明白这一点。

Answer 1

我能想到的唯一变化会导致你的标记发生一些重大变化。

基本上，我很确定这与float:left和float:right元素未被清除有关。 IE因错误地将float属性传播给不打算浮动的元素而臭名昭着。为了避免这种情况 - 浮动时 ​​- 通常做这样的事情......

CSS：

.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }

然后在你的标记中执行此操作：

<div>
  <div class="fl"></div> 
  <div class="fl"></div> 
  <div class="clr"></div><!-- This element stops float from going to unintended elements --> 
</div>

理想情况下，您可以将浮动元素定位为跨浏览器支持。

如果无法重新处理您的标记，您可以尝试添加具有clear: both;样式的空元素作为浮动元素的最后一个SIBLING。所以......以你的ul＃secondNav为例，你可以尝试一下......

<ul id="secondNav">
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li class="stuff"></li>
  <li style="clear: both;"><!-- Leave empty --></li>
</ul>

Answer 2

显然修复非常简单......我让它变得太复杂了。

我（也）不知道的是“在IE中，z-index不能高于包含元素的z-index。”

所以我回到原始文件，他们有.container{width:940px; margin:0 auto; position: relative;}并保持原样。然后为#header{.....; z-index:1; }和#mainNav{...; z-index:2;}添加了z-index值并处理了...

• 隐藏的下拉菜单
• 搞砸了标题

这是修改后的代码：http://jsfiddle.net/walahh/QwFL6/3/

希望这有助于某人:)并感谢所有花时间阅读我的帖子并帮助我的人。