Perché il mio pulsante di chiusura oscilla in alcuni browser?

Si prega di check-out il demo - http://jsfiddle.net/cYGzC/Perché il mio pulsante di chiusura oscilla in alcuni browser?

L'idea è che al passaggio del mouse croce ('×') diventeranno attorno al suo centro che darà un bel movimento di rotazione al passaggio del mouse. Il problema è che questo funzioni correttamente il centro di × e il centro del cerchio deve coincidere.

.close_button { 
    background-color: #3b3b3b; 
    width: 40px; 
    height: 40px; 
    border-radius: 20px; 
    box-shadow: 0 0 5px rgba(150,150,150,0.9); 
    color: #fff; 
    font-size: 40px; 
    line-height: 40px; 
    text-align: center; 
    transition-duration: 2s; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    cursor: pointer; 
}

Il trucco CSS precedente sembra funzionare in molti browser ad eccezione di Chrome in Windows. (Il Mac Chrome sembra funzionare correttamente.)

fonte

2013-04-12 AppleGrew

Chrome in Windows funziona bene per me. – Daedalus

Funziona bene in chrome anche per me ma nell'ultima versione di firefox si muove di un pixel quindi gira facendolo girare fuori centro –

Per me oscilla molto in modo evidente in Chrome per Windows. Forse il font o altri fattori sono in gioco qui. – AppleGrew

La risposta breve è quella di utilizzare un'immagine per la tua croce. Come dice Taras, non vi è alcuna garanzia che i font saranno resi esattamente uguali in tutti i browser.

fonte

2013-04-12 08:41:28

peccato che qualcuno abbia downvoted questo; +1 per la risposta corretta –

@ alex-shesterov Gli odiatori che odieranno! –

Si sente triste, ma credo che questa sia l'unica risposta corretta. – AppleGrew

Sembra che lo font-family causi parte del problema. Se si effettua la font-family:Arial, Helvetica, sans-serif; sembra funzionare meglio in Firefox

http://jsfiddle.net/cYGzC/1/

fonte

2013-04-12 08:38:55 Andrew

Beh, per me è peggio per FF per WinXP. : P Quindi immagino che usare un'immagine di sfondo sia l'unico modo sicuro. – AppleGrew

non perfetto centrato su mac os: http://d.pr/i/znxT in alto/a destra bravedick

Ammetto che l'utilizzo di Arial non rende la X centrata perfettamente ma blocca il salto iniziale. tuttavia quando lo guardi in cromo è saltato fuori centro rispetto a Firefox. Penso che il problema più grande è che ognuno dei browser tratta i caratteri in modo diverso nel modo in cui visualizzano il carattere nel browser. C'è un modo per reimpostare un font, quindi è lo stesso in ogni browser? – Andrew

Perché il mio pulsante di chiusura oscilla in alcuni browser?

risposta

Problemi correlati