2

重複の可能性:
IE 6 & IE 7 でテキストボックスの背景画像が押し出される

Firefox、Chrome、およびその他のブラウザーでは正常に動作する CSS がいくつかありますが、IE では同じようにレンダリングできません。

入力フィールドにこの CSS を使用すると、すべてのブラウザーで完全に表示されます (フィールドに書き込むまでは)。Internet Explorer で、フィールドの末尾を超えて書き込むと、背景が繰り返されます。これが私のコードです：

.web_contact_text
{
position:relative;
padding-left:10px;
padding-right:10px;
width:244px;
height:65px;
line-height:65px;
margin-left:auto;
margin-right:auto;
margin-bottom:-3px;
left:10px;
background:transparent;
background-image:url("imagenes/contactar/campo_back_text.png");
border:0px solid;
font-family:Arial;
font-size:18px;
color:#000000;
cursor:pointer;
cursor:hand;
}



<input type="text" name="contactar_nombre" class="web_contact_text" value="Insertar Nombre" title="Insertar Nombre" onclick="this.value=''">

悪い

悪いバージョン (IE)

他のブラウザでもOK

良いバージョン (他のブラウザ)

入力フィールド、テキストなどを使用するときの背景画像の問題、この入力フィールドのサイズをさらに書き込むときに背景の繰り返しとして使用される画像、これは Internet Explorer でのみ発生し、さらに書き込むときにバックグラウンドを尊重せず、これを常に繰り返す バックグラウンドを修正しない 尊重しない

http://i40.tinypic.com/4vs187.png

4

2 に答える 2

1

追加してみてください：

background-repeat:no-repeat;
于 2012-09-26T12:21:02.533 に答える
0 
.web_contact_text 
{
  background: url(filename.jpg);
  position: relative;
}

場合によってはこれがうまくいかないことがあるので、別の解決策として、背景画像を持つ要素に幅または高さを割り当てる方法があります。高さや幅を割り当てたくない場合があるため、解決策は Internet Explorer に 1% の高さを割り当てることです。IE は高さを min-height として解釈するため、この CSS ルールは外観には影響しません。

.web_contact_text
{
  background: url(filename.jpg);
  height: 1%;
}

html>body .web_contact_text 
{
  height: auto;
}

CSS コマンドは、 CSS コマンドheight: 1%によってキャンセルされheight: autoます。Internet Explorer は を認識しないためhtml>body、これを 2 番目の CSS ルールの前に挿入すると、この CSS ルール全体が IE によって無視されます。

出典： リンク

于 2012-09-26T12:23:47.107 に答える