2

我正在处理的页面在 Chrome、Firefox、Opera 和 Safari（在 Mac 和 Windows 中）中完美显示，除了IE 7 和 8。标题应该如下所示： 在此处输入图像描述

但在 IE 中它看起来像这样： 在此处输入图像描述

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

有人可以帮帮我吗？！我现在没主意了:(

这是[页面]（但是，我稍后将不得不删除链接）任何帮助将不胜感激！

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

4

2 回答 2

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;样式的空元素作为浮动元素的最后一个兄弟。所以......以你的 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>
于 2012-09-10T18:36:27.897 回答
0

所以显然修复很简单......我让它太复杂了。

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

所以我回到原来的文件，他们在那里.container{width:940px; margin:0 auto; position: relative;}并保持原样。#header{.....; z-index:1; }然后为and添加 z-index 值，#mainNav{...; z-index:2;}而这照顾了...

  • 隐藏的下拉菜单
  • 混乱的标题

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

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

于 2012-09-11T21:34:02.877 回答