0

z-index に問題があります。Chrome と FF では、もちろん IE 8 を除いて、うまく動作します。

私が試したこと：

<container>
  <inputfield>
  <overlay-of-the-inputfield>
</container>

「オーバーレイ」は入力フィールドの上にあり、入力フィールドを選択できないようにする必要があります。overloy は FF では機能しますが、IE では機能しません。

ソースコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
.input-overlay{
    position:absolute;
    left:0;
    top:0;
    width:15px;
    height:16px;
    border:2px solid #A0C8FA;
    border-radius:2px;
}        
.input-overlay:focus{
    border:2px groove #A0C8FA;
    border-radius:2px;
}    
.input-overlay:hover{
    border:2px dashed #4D82C4;
    border-radius:2px;
z-index:150;
}
.input-checkbox-textfield{
    width:15px;
    height:20px;
    position:absolute;
    left:0;
    top:0;
}    
.inputfield-checkbox{
    width:15px;
    border:none;
    padding-left:4px;
    font-weight:700;
}
</style>
</head>    
<body>
<DIV style="Z-INDEX:10;">
    <DIV style="Z-INDEX: 100" 
         id="indonesier_uiterlijkIDOverlay" 
         class="input-overlay"
         tabIndex="5">
     </DIV>
    <DIV style="Z-INDEX: 1" 
         class="input-checkbox-textfield">
             <INPUT type="text"
                    style="Z-INDEX: 1;" 
                    id="inputField" 
                    value="X"
                    class="inputfield-checkbox"/> 
    </DIV>
</DIV>    
</body>
</html>

入力フィールドの中央にマウスを移動すると、IE でホバーがトリガーされません。また、「X」は選択可能なままです。

私が追加した場合：

.input-overlay 背景色:青;

その後、IEで動作しますが、入力フィールドが消えます。

これに対する解決策を知っている人はいますか？

4

1 に答える 1