Scomparsa del pulsante di invio in IE7

Question

Saluti. Sto riscontrando problemi con il seguente codice legacy. Va bene in tutto tranne IE7, in cui il pulsante di invio scompare. Lo spazio è ancora lasciato per esso sulla pagina, ma non mostra. Ho provato vari modi per forzare hasLayout, ma senza successo. Qualche suggerimento?

XHTML (XHTML 1.0 Strict DOCTYPE):

<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>

CSS:

#headerFunctionality {
    float: right;
    display: inline;
    margin: 24px 14px 25px 0; 
}

#headerSearch{
    float: left;
    margin-left: 20px;
    width: auto;
}

#headerSearch label{
    position: absolute;
    top: -5em;
    color: #FFF;
}

#headerSearch input.text{
    width: 133px;
    height: 18px;
    border: 1px solid #999;
    font-size: 0.69em;
    padding: 2px 3px 0;
    margin: 0 6px 0 0;
    float: left;
}

/* Replace search button with image*/
input#btn_search {
    width: 65px;
    height: 20px;
    padding: 20px 0 0 0;
    margin: 1px 0 0 0;
    border: 0;
    background: transparent url(../images/btn.search.gif) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

input#btn_search:focus, input#btn_search:hover {

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

}

Answer 1

Alla fine l'ho ordinato rimuovendo:

form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

L'ho sempre incluso nelle sostituzioni di immagini CSS dopo averlo letto da qualche parte anni fa, ma lasciarlo fuori non sembra aver influito su nessun altro browser e ha risolto il problema in IE7.

Answer 2

ti sei assicurato che display:block sia stato aggiunto al CSS sull'input? Questo dovrebbe fare il trucco.

Answer 3

Sembra un problema di rientro del testo / pulsante di sostituzione dell'immagine in IE6.0 e 7.0. Questa soluzione ha funzionato per me alcune volte.

Crea un foglio di stile separato per queste versioni del browser e inserisci questo codice nell'intestazione:

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Nel file CSS, prova qualcosa del genere (puoi cambiarlo per inserire # btn_search o qualunque cosa tu abbia scelto come target)

#btn_search {
   width: 85px;
   height: 20px;
   padding: 20px 0 0 0;
   margin: 1px 0 0 0;
   border: 0;
   background: transparent url(../images/btn.search.gif) no-repeat center top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* for IE 5.x */
   font-size: 0;
   color: #fff;
   text-align: right;
   text-indent: 0;
}

&

quot; & Colore quot; dovrebbe avere lo stesso colore del tuo sfondo.

&

quot; & Width quot; dovrebbe essere 20-30 pixel PIÙ della larghezza della tua immagine.

Ulteriori informazioni e aiuto sono disponibili qui: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

Ci sono due cose che posso vedere dal codice che potrebbero causare questo:

1 - l'immagine btn.search.gif è completamente trasparente, il colore dello sfondo o non trovato. Il pulsante non ha colore di sfondo e bordi, quindi non apparirebbe se non fosse per l'immagine / testo

2: la visibilità del pulsante è impostata su nessuna, il che lascia spazio sulla pagina ma non rende il pulsante. Riesci a guardare gli stili in Firebug?

Answer 5

se aggiungi un attributo nome , funziona?

Answer 6

Il problema probabilmente deriva dal Guillotine Bug . È un bug in IE6 e IE7 che si verifica quando sono presenti determinate miscele di: hover, float e layout (vedi link per i dettagli). Credo che inserendo questo:

<div class="clear"><!-- --></div>

subito prima di </form> e quindi applicando ad esso il seguente CSS:

.clear {clear:both;}

lo risolverebbe.