css - 在 IE 6 和 IE 7 中推出的文本框背景图片

Question

请参阅this jsFiddle 示例。当您输入长值时，我在文本框上使用的背景图像会在 IE 中显示出来:

解决方案(以防jsfiddle被删除)

CSS

#txt_services_by_zip_code_search{
    border: none;
    float: left;
    height: 22px;
    width: 95px;
    padding:0 5px;
    background: transparent
}
#txt_services_by_zip_code_search_wrapper {
    background: transparent url('http://i.imgur.com/quh2W.gif') no-repeat 0 -25px;
    display: inline-block;
    *display: inline;
    zoom: 1
}

HTML

<div id="txt_services_by_zip_code_search_wrapper">
    <input type="text" name="services_by_zip_code_search" id="txt_services_by_zip_code_search" class="txt_services_by_zip_code_search" />
</div>

Answer 1

一个经典的 IE bug..

没有干净的解决方法。您必须将输入包装在另一个元素中，例如 div，并将 background 应用到该元素。

在 IE7 中查看: http://jsfiddle.net/P47sa/3/

这是互联网上的一个随机页面，与我的观点一致:http://blogs.creative-jar.com/post/Input-backgrounds-scrolling-in-IE.aspx

如果您的页面大量使用 JavaScript/jQuery，您可以使用它来应用修复而不是弄乱 HTML。