CSS Crossbrowser di consistenza su una semplice animazione CSS3

Question

Ho un problema sulla coerenza CSS qui: http://www.progettostand.com/ Controllo delle icone sociali in alto a destra, le posizioni dell'icona sono corrette su IE (Miracle!), Sempre 20 px Off con FF e OFF a pagina Carico, quindi centrato dopo il primo mouse su Chrome. Sicuro che è qualcosa delle seguenti: dopo il comportamento marginale-sinistro. Ho provato a giocherellare con quello, ma è riuscito a cambiare il problema tra i browser e non è mai riuscito a far funzionare tutti e tre come previsto. Per favore aiutami inchiodarlo.

Grazie mille in anticipo per il tuo tempo e lo sforzo.

Answer 1

Solo una soluzione rapida, attualmente ho solo Chrome da testare, quindi non puoi davvero garantire per altri browser, ma forse provare ad aggiungere qualcosa del genere ai tuoi stili:

#top-social-bar a{
 text-align:left;
}

#top-social-bar a:before, 
#top-social-bar a:after { 
  text-align: center;
}

.

Answer 2

I temi esterni non sono affidabili.

Devi aggiungere questo alla fine del tuo stile.CSS:

#top-social-bar{ 
    display:table;
}
#top-social-bar li {
    display: table-cell;
    float: none;
}
#top-social-bar a:before, #top-social-bar a:after{
    width:auto
}

.