IE7 z-index问题

嗨！我在IE7中遇到了z-index的问题。我有一张桌子，用户被要求输入地址。 postalCode的javascript验证器框“formStatusBoxContainer”出现在选择框后面，下一行显示图标“formStatusIcon”。任何想法如何解决这个问题？除了移动盒子。在FF和IE8中一切看起来都很好。IE7 z-index问题

<tr class="rowBack2"> 
    <th width="150px">Postleitzahl:</th> 
    <td> 
    <input type="text" name="postalCode" value="" > 
    <span style="position: relative;"> 
     <span class="formStatusBoxContainer"> 
     <img src="/images/formfield_default.gif" class="formStatusIcon" 
      id="postalCodeIcon"> 
      <span class="formStatusBoxTooltip" style="display: none;" 
       id="postalCodeStatus"> 
       <div class="formStatusBoxInner" id="postalCodeStatusInner"> 
       Bitte geben Sie die Postleitzahl ein. 
       </div> 
      </span> 
     </span> 
    </span> 
    </td> 
</tr>  

<tr class="rowBack1"> 
    <th width="150px">Land:</th> 
    <td> 
    <span style="position: relative;"> 
     <select name="country" id="country"> 
     <option value="AX">Aland Inseln</option> 
     <option value="DZ">Algerien</option> 
     <option value="AD">Andorra</option> 
     </select> 
    </span> 
    <span class="formStatusBoxContainer"> 
     <img src="/images/formfield_ok.gif" class="formStatusIcon" id="countryIcon"> 
     <span class="formStatusBoxTooltip" style="display: none;" id="countryStatus"> 
     <div class="formStatusBoxInner" id="countryStatusInner">Land</div> 
     </span> 
    </span> 
    </td> 
</tr>

CSS工具提示：

.formStatusBoxContainer { position:relative; } 
.formStatusIcon { position:relative; top:0px;margin-left:5px;z-index:2; } 

.formStatusBoxTooltip { 
position:absolute; 
left:35px; 
top:-5px; 
width:150px; 
background:#7EA822; 
padding:1px; 
border-right:2px solid #666666; 
border-bottom:2px solid #666666; 
z-index:3; 
}

CSS表格行：

只是字体，边距和Tab键。没有什么位置或z-index应该影响。

来源

2010-08-27 heffaklump

要回答你的两个答案。它不在选择框上。有一个图标'formStatusIcon'，弹出窗口也显示在后面。也在上面一行的输入字段后面。看起来弹出窗口落在整个下一行的后面？ – heffaklump 2010-08-27 08:24:11

这是IE旧版本中的一个已知问题（我认为IE7修复了它）。选择框将始终呈现在其他HTML元素的顶部。我相信这是因为选择框是一个Windows控件，不受浏览器管理，或者沿着该线路进行管理。

在任何情况下，这种类型的问题最常见的解决方案是： 1）当隐藏/剪切控件具有焦点时隐藏选择框。 2）将IFrame放在控件后面。 IFrame具有与选择框相同的属性，并且始终位于其他HTML元素之上，包括选择标签。有关如何操作的示例，请参阅http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx。这当然是一个丑陋的黑客。

来源

2010-08-27 07:32:45 svanryckeghem

为了解决这个问题，我使用了BGiFrame和jQuery。

问题的原因是IE使用窗口下拉控件的下拉框，其中所有其他浏览器使用编码到渲染引擎的下拉框。

HTH

来源

2010-08-27 07:34:04 OneSHOT

我相信你需要给选择框的父较低的z-index

表{位置（在这种情况下表）：相对的; z-index：1;}

我以前遇到过下拉菜单出现在输入后面的问题，并解决了这些问题。

来源

2010-08-27 10:45:59 tbwcf

IE7 z-index问题

回答

相关问题