Question

你好！我在IE7中遇到z-index问题。我有一个表要求用户输入地址。 postalCode的javascript验证器框'formStatusBoxContainer'出现在选择框后面，下一行显示图标'formStatusIcon'。不知道怎么解决这个问题？除了移动盒子。 FF和IE8中的一切看起来都很好。

<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：

只需字体，边距和标签。没有任何位置或z-index应该影响。

Answer 1

这是旧版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。那当然是一个丑陋的黑客。

Answer 2

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

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

HTH

Answer 3

我相信你需要给选择框的父级一个较低的z-index（在这种情况下是表？）

表{position：relative;的z-index：1;}

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

IE7 z-index问题

3 个答案: