web-dev-qa-db-ja.com

背景が透明な入力ボックスはIE8ではクリックできません

フォームに絶対位置の入力ボックスがあります。入力ボックスの背景は透明です：

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

驚いたことに、IE8でこの入力ボックスをクリックして選択することはできません。ただし、Firefoxでは完全に機能します。 background: noneについても同じことが起こります。背景色を変更すると：

    背景色：赤;

正常に機能するため、これは透明な背景に関連する問題です。境界線を設定すると、その境界線をクリックするだけで入力ボックスが選択可能になります。

IE8で動作する透明な背景を持つクリック可能な入力ボックスを使用する回避策はありますか？

更新：例。 background-colorのコメントを外すと、入力ボックスが選択可能になります。選択ボックスをクリックし、Shift + Tabを押して入力ボックスにフォーカスすることもできます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>
htmlcssinternet-explorer-8internet-explorerinputbox
50
Viliam

IE8でこのような問題を再現することはできません。完全なテストケース？他の透明な要素がクリック可能な領域を覆う原因となるレイヤー化の問題はありませんか？

background-imageを設定すると違いが生じますか？透明なGIFはどうですか？

ETA：好奇心が強い！これは実際にはIE7のバグです。私の場合、あなたの例はIE7で説明されている動作を示しますが、IE8ではEmulateIE7モードの場合のみです。 IE8ネイティブレンダリングでは修正されています。一般に、適切なX-UA-Compatibleヘッダー/メタを使用してIE7レンダリングにフォールバックしないようにする必要があります。ただし、はい、background-imageを透明なGIFに設定すると、問題が解決しました。 Tsk、この日でも年齢でも空白のGIFが必要ですよね？

27
bobince

（透明な）背景画像を定義する必要があります。

誰かが興味を持っている場合に備えて。推奨される回避策の1つ。

8
Viliam

Input要素のhtmlを含めてください。

入力要素をどのように定義しましたか？以下のコードはIE8（IE 8.0.7600 Windows）で動作します。 IE8でこれを試してみましたが、入力エリアをうまく​​「選択」することができました。

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>
7
user250120

入力フィールドに透明な背景画像を与えるだけで機能します...

例：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
6
Franky

非常に簡単なテストケースを次に示します。

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

IE8で実行する場合-絶対に配置されたテキストボックスではなく、基になるテキストボックスにフォーカスが表示されるはずです。

私たちの解決策は、透明な背景色と透明な背景画像の両方を設定することでした：

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>
2
user328508

Windows 7でIE10を使用しても同じ問題が見つかりました。次の両方の方法で問題が修正されました。


透明な背景画像を使用したフランキーの方法...

background:url(/images/transparent.gif);


不透明度「0」のRGBBA背景色を使用するSketchfemmeの方法

background-color:rgba(0,0,0,0);


z-indexの編集に関するJim Jeffersの提案は、私にとってはうまくいきませんでした。

2
Benjamin Walsh

Bobinceが観察したように、これはIE7のバグです。 value=" &nbsp; &nbsp; &nbsp; "を追加して解決すると便利な場合があります。クリック可能な領域を十分に大きくするために、必要な数の改行しないスペースを使用します。アプリによっては、後でこれらを削除する必要がある場合があります。

1
miles

IEは無限の知恵で、レンダリングするものは何もないと考えているため、アイテムをレンダリングしないことを決定しています。これに対処するには多くの方法がありますが、基本的にIE噛む何かを与える必要があります。

Inputタグ自体に「value = x」を追加することは間違いなく機能します。しかし、おそらくそれは最善の解決策ではありません。シンプルなcolor：black（フォーカスなし）を使用すると、要素をタブで移動できます。入力スタイルに「：focus」を追加すると、要素をレンダリングできます。

これを試して：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>
1
user250120
 background-image:url(about:blank);background-color:transparent;
1
reyhappen

同様の問題があった-> IE8テキストボックスは編集できませんでした（私のアプリのラッパーにposition：absoluteがある場合）。クリックは境界線でのみ機能しました。色を塗りつぶして透明にすることもできませんでした。次のdoctypeの変更により、この問題は修正されました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ソース： http://www.codingforums.com/showthread.php?p=1173375#post1173375

0
Muthukumar Arumugam

実は私の場合は

text-indent: -9999px

以前はテキストを削除していましたが、削除しないでください。再度クリックできます。

0
e-anima