Javascript IE8中的Html和CSS z索引问题

关于

InternetExplore8

的

z-index

问题，我有一个问题。我有一个主容器，里面有几个

div

。我的问题是，我使用

javascript

在主容器中的子

divs

上创建新的

divs

。由于某些原因，主

div

边框仅位于新创建的

div

的顶部，即使主容器div

z-index

为1。更清楚地说，这就是IE8中的情况：

         ----
        |    |   <--newly created div generated by js
-----------------
|       |    |  |
|        ----   |
|               |
|               |
-----------------

这个问题只发生在IE8和IE7中。有办法解决这个问题吗？非常感谢

编辑：

我刚刚发现问题实际上来自于容器中div的背景图像

div

<div id='container'>

  <div>
    <a href='#'/>   //hover to a will generate a new div.  //before hover

    <a href='#'>    // <- after hover to the link
      <div id='newDiv'>
        contents....
      </div>
    </a>
    <div id='border'></div>    //this is the problematic div
  </div>

</div>


css 

#border {
  position:absolute;
  top:0px;
  left:0px;
  height:4px;
  width:100%;
  background-image:url(/images/top.gif);
//the top.gif is a 2px height and 100% width image which on top of the new div
  z-index: 1;
}

//这是有问题的div
css
#边界{
位置：绝对位置；
顶部：0px；
左：0px；
高度：4px；
宽度：100%；
背景图像：url（/images/top.gif）；
//top.gif是一个2倍高、100%宽的图像，位于新div的顶部
z指数：1；
}

尝试放置一个空div

<div></div>

在有问题的div之后

“#border”与#newDiv处于不同的堆叠上下文中-但它与#newDiv的父级处于相同的堆叠上下文中

---

在#newDiv的父级上设置一个位置（相对或绝对），并在其上设置一个大于#border上z索引的z索引。

这段代码似乎应该起作用。您是否尝试添加缩放：1；到#container和#newDiv CSS（我记得旧版本的IE在重绘和添加zoom:1方面有一些奇怪的问题；有时可以修复）。这也可能是一个相关的问题：这听起来像是本地堆叠上下文的问题（这通常发生在旧版本的IE中）。如果是这样，您需要使用

位置
值
相对值
或
绝对值
，或
z索引
值而不是
自动
，来显示每个相关元素的CSS和HTML。最简单的方法是创建一个演示（使用类似的在线服务），并在问题中添加一个指向演示的链接；或者，添加一个指向活动页面的链接。尽管存在I8/9问题，为什么要将堆栈级别值（z-index）应用于.container？处于相对位置将生成一个新的堆栈上下文。顺便说一下，如果将显示值：block应用于内部接收div的对象，它看起来会更干净。是内联级元素，除非修改其显示值，否则不应在内部包含块级元素。请显示
#newDiv
父级的CSS。我猜它的
位置
值为
相对
或
绝对
，但没有
z-index
值。这是问题的关键。另外，您使用的是什么HTML文档类型？由于浏览器似乎处于怪癖模式，我还猜测该页面要么没有HTML doctype，要么是没有DTD的HTML4.01过渡doctype。
#container{
  background-color: #FFFFFF;
  border: 1px solid #364B78;
  position: relative;
  padding: 10px;
  clear: both;
  min-height: 200px;
  z-index: 1;
}

#newDiv{
  position: absolute;
  background-color: red;
  top: -175px;
  left: 50px;
  width: 200px;
  height: 150px;
  z-index: 1000;
  padding: 8px;
}

<div id='container'>

  <div>
    <a href='#'/>   //hover to a will generate a new div.  //before hover

    <a href='#'>    // <- after hover to the link
      <div id='newDiv'>
        contents....
      </div>
    </a>
    <div id='border'></div>    //this is the problematic div
  </div>

</div>


css 

#border {
  position:absolute;
  top:0px;
  left:0px;
  height:4px;
  width:100%;
  background-image:url(/images/top.gif);
//the top.gif is a 2px height and 100% width image which on top of the new div
  z-index: 1;
}

<div></div>