2010-09-13 107 views
0

我有这个textarea(它是展开后,点击一个特定的按钮),应该是该文本输入字段。在FF和Chrome中,它正在工作。但不在IE(6 + 7)中。有没有人有线索,问题在哪里以及我如何解决?IE忽略zIndex

<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的背景色

回答

4

IE对待z-index有点不同于其他浏览器。这些博客文章可能对您有所帮助:

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

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

总之,我认为你可能需要的z-index添加到具有它的人的父元素。 (我不完全确定是否将其添加到一个级别会起作用 - 如果这不起作用,您可以尝试将它添加到祖父母元素中。)

+0

这就是解决方案!你让我今天一整天都感觉很好 ;)。谢谢! – Prjio 2010-09-13 15:37:38

+0

@Prjio:很高兴我能帮忙:) – 2010-09-13 15:38:46