Scomparsa del pulsante di invio in IE7
-
22-07-2019 - |
Domanda
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;
}
Soluzione 4
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.
Altri suggerimenti
ti sei assicurato che display:block
sia stato aggiunto al CSS sull'input? Questo dovrebbe fare il trucco.
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.
" & 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
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?
se aggiungi un attributo nome , funziona?
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.