Question

我有这个textarea（它是在点击一个特定按钮后显示的），它应该在文本输入字段上。在FF和Chrome中，它正在运行。但不是在IE（6 + 7）。有没有人有线索，问题出在哪里以及如何解决？

<html>
<head>
<style type="text/css">
.Tbl { width: 100%; }
.Col1 { width: 10%; }
.Col2 { width: 90%; }

.CellTA { background-color: #00F; vertical-align: top; padding: 5px; }
.DivTA { position: relative; }
.DivTA2 { position: absolute; background-color: #FF0; padding: 5px; }
.TA { position: relative; z-Index: 10; height: 50px; width: 200px; }

.CellInp { background-color: #F0F; padding: 5px; }
.DivInp { position: relative; width: 100%; background-color: #0F0; }
.Inp { position: relative; width: 200px; }
</style>
</head>
<body>
<table class="Tbl">
  <colgroup>
    <col class="Col1" />
    <col class="Col2" />
  </colgroup>
  <tr>
    <td>Ref</td>
    <td class="CellTA">
      <div class="DivTA">
        <div class="DivTA2">
          <textarea class="TA"></textarea>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>eMail</td>
    <td class="CellInp">
      <div class="DivInp">
        <input type="text" class="Inp">
      </div>
    </td>
  </tr>
</table>
</body>
</html>

提前致谢

编辑：添加了填充并更改了DivTA2的背景颜色

Answer 1

IE对z-index的处理方式与其他浏览器略有不同。这些博客条目可能对您有所帮助：

http://annevankesteren.nl/2005/06/z-index

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

简而言之，我认为您可能需要将z-index添加到拥有它的父元素中。（我不完全确定如果将它添加到一级也可以 - 如果不起作用，你可以尝试将它添加到祖父元素中。）

IE忽略zIndex

1 个答案: