Internet Explorer和CSS背景图像不起作用[重复]

Question

可能重复：
Textbox background image pushing out in IE 6 & IE 7

我有一些 CSS 在 Firefox、Chrome 和其他浏览器中运行良好，但在 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=''">

不好

其他棕色也可以

问题在于背景图像，当您使用输入字段，文本等时，当您写入更多大小的此输入字段时，图像用作背景重复，这件事只发生在 Internet Explorer 中，当你写得更多，不尊重背景，一直重复这个，不修复背景，不尊重

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

Answer 1

尝试添加：

background-repeat:no-repeat;

Answer 2

.web_contact_text 
{
  background: url(filename.jpg);
  position: relative;
}

有时这不起作用，因此另一种解决方案是为具有背景图像的元素分配宽度或高度。您可能不想指定高度或宽度，因此解决方案是为 Internet Explorer 指定 1% 的高度。因为 IE 将高度解释为最小高度，所以这个 CSS 规则不会影响外观：

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

html>body .web_contact_text 
{
  height: auto;
}

height: 1% CSS 命令被height: auto CSS 命令取消。 Internet Explorer 不理解 html>body，因此通过在第二个 CSS 规则前面插入它，整个 CSS 规则将被 IE 忽略。

来源： link