Crossbrowser de consistência CSS em uma animação CSS3 simples

Question

Estou com um problema de consistência de CSS aqui:http://www.progettostand.com/Verificando os ícones sociais no canto superior direito, as posições dos ícones estão corretas no IE (milagre!), sempre 20px desativadas com FF e desativadas no carregamento da página, e centralizadas após passar o primeiro mouse no Chrome.Claro que é algo ligado ao comportamento :after margin-left.Eu tentei mexer nisso, mas só consegui alternar o problema entre navegadores e nunca consegui que todos os três funcionassem como esperado.por favor me ajude a acertar.

Muito obrigado antecipadamente pelo seu tempo e esforço.

Answer 1

Apenas uma solução rápida, atualmente só tenho o Chrome para testar, então não posso garantir outros navegadores, mas talvez tente adicionar algo assim aos seus estilos:

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

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

Answer 2

Às vezes, os temas externos não são confiáveis.

Você deve adicionar isto no final do seu style.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
}