Verwendung eines Sprite-Bildes für Suchfeld-Eingabetaste

Question

EDIT: Sie können das Suchfeld live here sehen.

Bevor ich erklären, lassen Sie mich Sie den Code zeigen, die ich benutze:

HTML

<div class="SiteSearch"> 
    <form action="/search" id="searchform" method="get"> 
     <input x-webkit-speech="" autocomplete="off" type="text" id="gText" name="q" id="q" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value ='' "search" placeholder="Search.."/> 
     <input type="submit" id="gBtn"/> 
    </form> 
</div> 

CSS

#Head .SiteSearch { 
    top: 12px; 
    right: 0; 
} 

#Head .SiteSearch { 
    float: right; 
    position: relative; 
} 

input#gText { 
    float: left; 
    width: 225px; 
    height: 23px; 
    line-height: 24px; 
    text-indent: 5px; 
    font-family: arial,sans-serif; 
    font-size: 1em; 
    color: #333; 
    background: white; 
    border: solid 1px #D9D9D9; 
    border-top: solid 1px silver; 
    border-right: none; 
    vertical-align: middle; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

#searchform #gBtn { 
    background-image: url('search.png'); 
    width: 31px; 
    height: 27px; 
} 

#gBtn { 
    vertical-align: middle; 
    cursor: pointer; 
    width: 40px; 
    height: 31px; 
    line-height: 100%; 
    padding: 0; 
    font-size: 0; 
    text-indent: -999px; 
    color: transparent; 
    background-position: 0 0; 
    border: none; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

input#gBtn:hover { 
    background-position: 31px 0; 
    border: none; 
} 

Dies ist, wie das Suchfeld aussieht auf IE7 vs. IE8/IE9:

gegen

Wie man oben sehen kann, wird die Eingabe-Taste Bild nicht wird in IE7 gezeigt. Wie kann ich das beheben?

Jede Hilfe wird geschätzt. Vielen Dank!

Answer 1

sein kann ich es fest, indem Sie den CSS-Code wie so ändern:

#Head .SiteSearch { 
    top: 12px; 
    right: 0; 
} 

#Head .SiteSearch { 
    float: right; 
    position: relative; 
} 

input#gText { 
    float: left; 
    width: 225px; 
    height: 23px; 
    line-height: 24px; 
    text-indent: 5px; 
    font-family: arial,sans-serif; 
    font-size: 1em; 
    color: #333; 
    background: white; 
    border: solid 1px #D9D9D9; 
    border-top: solid 1px silver; 
    border-right: none; 
    vertical-align: middle; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

/* REMOVED THIS PIECE 
    #searchform #gBtn { 
    background-image: url('search.png'); 
    width: 31px; 
    height: 27px; 
}*/ 

#gBtn { 
    vertical-align: middle; 
    cursor: pointer; 
    width: 40px; 
    height: 31px; 
    line-height: 100%; 
    padding: 0; 
    font-size: 0; 
    text-indent: -999px; 
    color: transparent; 
    background-image: url('search.png'); /* ADDED */ 
    background-position: 0 0; 
    border: none; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

input#gBtn:hover { 
    background-image: url('search.png'); /* ADDED - BUT OPTIONAL */ 
    background-position: 31px 0; 
    border: none; 
} 

Answer 2

Schreiben Sie background statt b ackground-image in Ihrem #gBtn Knopf. das ist Arbeit