在IE 6&amp ;;中推出的文本框背景图像IE 7

时间:2011-07-18 22:35:55

标签: css internet-explorer internet-explorer-7 internet-explorer-6

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

enter image description here

解决方案(如果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>

1 个答案:

答案 0 :(得分:1)

经典的IE漏洞..

没有干净的解决方法。您必须将输入包装在另一个元素(例如div)中,然后将background应用于该元素。

请参阅IE7: http://jsfiddle.net/P47sa/3/

以下是互联网上随机页面的同意我:http://blogs.creative-jar.com/post/Input-backgrounds-scrolling-in-IE.aspx

如果您的网页大量使用JavaScript / jQuery,您可以使用它来应用修补程序而不是混乱HTML。