Crossbrowser de consistência CSS em uma animação CSS3 simples
Pergunta
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.
Solução
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;
}
Outras dicas
À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
}