IE 8 sposta il testo del pulsante di input quando si fa clic su

Question

<input type="button" value="Button" /> 

IE riordina il testo di 1px quando si fa clic sul pulsante per impostazione predefinita. C'è un modo per fermare questo con solo CSS?

Aggiungo anche i miei stili a questo pulsante, e tutto è perfetto finché non faccio clic sul testo nel pulsante ... IE sembra ignorare lo stato: active definito nel mio foglio di stile. Ma se faccio clic sul pulsante e non sul testo, IE esegue lo stato: active. Ovviamente il problema del testo in movimento è ancora presente, qualunque cosa io faccia.

Qualche idea?

Answer 1

Se si utilizza un A-tag in stile, è possibile risolvere completamente questo problema di stato "premuto". Usando display:block e alcuni CSS puoi dare uno stile al tag A per assomigliare esattamente a qualsiasi pulsante.

Answer 2

Non so quale versione di IE che si sta utilizzando, ma cerco Button background shift Inoltre, controllare Remove 3D push effect on button, in particolare la risposta da allicarn, che cambia l'imbottitura dall'elemento on: attiva. Ricorda solo di mettere il css in casi specifici di IE, come un blocco IF.

Answer 3

Ok, ho avuto lo stesso problema e ho scoperto una soluzione che funziona per tutti i browser.

Avevo due pulsanti modulo che ho modificato i bordi, la famiglia di caratteri e le dimensioni e il riempimento. Quando li clicco su IE, "salteranno" perché IE è stupido secondo me. Tutti gli altri browser sembrava per lo stile dei pulsanti in modo corretto e non hanno un problema con i pulsanti in movimento quando l'utente fa clic su di loro visualizzazione ..

La soluzione che ho trovato era:

stile dei pulsanti di forma in modo che ciascuno di essi hanno un margine uguale e applica una divisione wrapper con una posizione o un margine che verrà compensato a tuo piacimento.

#myButton { 
     font-family: Times New Roman; 
     font-size: 16pt; 
     border: 2px solid #f7f6f4; 
     margin: 20px; 
     padding:15px; 
    } 



    <div style="float:right;margin-right:75px;"> 
     <input type="submit" name="myButton" id="myButton" value="Don't Jump!" /> 
    </div>