50

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

.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>
4

14 に答える 14

27

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

設定background-imageは違いますか？透明なGIFはどうですか？

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

于 2010-01-20T02:55:57.790 に答える
8

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

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

于 2010-01-20T21:35:56.077 に答える
7

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>
于 2010-01-20T02:57:13.903 に答える
6

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

例：

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
于 2010-12-01T08:33:36.203 に答える
2

これは非常に単純なテストケースです。

<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');"/>
于 2010-04-29T05:14:51.743 に答える
2

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


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

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


不透明度が「0」のrgba背景色を使用したSketchfemmeの方法

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


z-indexを編集するためのJimJeffersの提案は私にはうまくいきませんでした。

于 2014-02-25T12:11:31.430 に答える
1

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

入力タグ自体に「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>
于 2010-01-20T04:38:40.893 に答える
1

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

于 2011-03-12T19:38:14.910 に答える
1 
 background-image:url(about:blank);background-color:transparent;
于 2014-02-17T03:43:30.020 に答える
0

同様の問題がありました->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

于 2011-12-23T16:26:27.643 に答える
0

実は私の場合は

text-indent: -9999px

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

于 2012-02-14T10:27:11.043 に答える
-1

奇妙に思えるかもしれませんが、関連する要素のz-indexを明示的に指定してみてください。これにより、背景色/画像が適用された要素の上に入力が強制的にレンダリングされます。

于 2010-01-20T04:24:46.760 に答える
-1

透明なgifトリックを使用しても、CSSの他の場所でbackground：transparentを設定すると、実際のWebブラウザーでは、IE7のバグが発生し、ホバーにカーソルが入らず、簡単にクリックできないようです。入力ボックス。

于 2010-06-24T23:30:32.257 に答える
-1

これは素晴らしい質問です。この投稿がなければ、何が起こっているのか理解できなかったでしょう。私の解決策はrgba(0,0,0,0)、透明なgifの代わりに使用することでした。

于 2013-04-10T18:14:29.537 に答える