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）

其他棕色也可以

好版本（其他浏览器）

问题在于背景图像，当您使用输入字段，文本等时，当您写入更多此输入字段的大小时，图像用作背景重复，这件事只发生在 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 将高度解释为最小高度，所以这个 CSS 规则不会影响外观：

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

html>body .web_contact_text 
{
  height: auto;
}

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

来源： 链接

于 2012-09-26T12:23:47.107 回答