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

回答

相關問題