Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - Textbox background image pushing out in IE 6 & IE 7

Please see this jsFiddle example. The background image I have used on textbox pushes out of view in IE when you type in long values:

enter image description here

Solution (in case jsfiddle gets deleted)

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

A classic IE bug..

There is no clean workaround. You have to wrap the input in another element such as a div, and apply the background to that instead.

See in IE7: http://jsfiddle.net/P47sa/3/

Here's a random page on the Internet that agrees with me: http://blogs.creative-jar.com/post/Input-backgrounds-scrolling-in-IE.aspx

If your page makes heavy use of JavaScript/jQuery, you could use that to apply the fix instead of cluttering up the HTML.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...