CSS CHERSIONSERSER CROSSBROWSER EN UNA ANIMACIÓN CSS3 simple

Question

Tengo un problema en la consistencia de CSS aquí: http://www.progettostand.com/ Comprobación de los iconos sociales arriba a la derecha, las posiciones del icono son correctas en IE (¡Milagro!), Siempre 20px apagado con FF y apagado en la carga de la página, luego se centra después de su primer pase hacia el cromo. Seguro que es algo ligado a la: después del comportamiento de margen izquierdo. He intentado jugueteo con eso, pero solo logré cambiar el problema entre los navegadores y nunca logró que los tres trabajen según lo previsto. Por favor, ayúdame a clavarlo.

Muchas gracias de antemano por su tiempo y esfuerzo.

Answer 1

Solo una solución rápida, actualmente solo tengo cromo para probar, así que no puedo responder realmente a otros navegadores, pero tal vez intente agregar algo como esto a sus estilos:

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

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

Answer 2

temas externos de somtimes no son confiables.

Debe agregar esto al final de su estilo.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
}