Question

我刚刚完成一个小型网站，并在IE7中注意到该徽标隐藏在主页上的图像后面：http://reapvalue.com/

这是html：

<div id="wrap">
  <div id="header">
    <ul id="main-nav">
  <li><a  href="/about/">About</a></li>
  <li><a   href="/what-we-do/">What We Do</a></li>
  <li class="last"><a   href="/contact/">Contact</a></li>
</ul>

<h1><a href="/"><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
<h1><a href="/"><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></a></h1>
  </div><!-- end #header -->
  <div id="tagline">
        <span class="green">renewable energy</span> <span class="magenta">and preservation</span>
  </div>

  <div id="main" class="clearfix">

         <div id="Stage" class="EDGE-909290339"></div>

            <img  id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">

这是CSS：

#header         { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo        { position: absolute; top: 0; left: 0; z-index: 5000; }

尽管将z-index设置为5000，它仍然隐藏在图像后面。任何有关将徽标放在前面的帮助都将非常感激。

感谢。

Answer 1

我无法解释原因，但IE7和IE8中的z-index表现得很奇怪。如果您正在使用z-index，并希望它在较旧的IE浏览器中工作，则需要确保您的父元素具有比您的元素更高的z-index。

例如，给#header z-index: 6000;它将被修复。

我希望有人可以给你一个更好的解释，为什么这个有效，正如我自己想知道的那样。

编辑：我用谷歌搜索了这个有趣的帖子：

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

为什么徽标隐藏在IE7中？

1 个答案: