imagino que lo que no funciona en ie son los estilos indicados con -webkit- y -moz-, es decir box-shadow, border-radius y transition.
-webkit- y -moz- son hack que se aplican para que los estilos sean tomados por navegadores específicos, en este caso por el motor Mozilla (Firefox) y el motor Webkit (Chrome y Safari son los más comunes).
Si buscas en google 'CSS hack' también encontrarás para las versiones de ie.
No obstante, con mucha dificultad lograrás sombras y border redondeados para ie7 e ie8
. Existe un hack llamado 'filter' con el cual podrías lograrlo, pero es 0 recomendable
.
En mi caso siempre elijo que en esos navegadores no se vean esas propiedades y listo. Pero bueno, a veces uno no tiene opción y necesita aplicar un diseño al pie de la letra para todos los navegadores. Si es este tu caso, tal vez debas comenzar a probar con soluciones alternativas, como utilizar una imagen de fondo que posea el borde redondeado, y encimar capas para generar el efecto de sombreado
.
Ahora bien, la propiedad 'transition' es mucho más complicada
. Si fuera tu, para lograr la animación deseada, comenzaría a probar con javascript, probablemente con la libreria jquery.
Dos últimas acotaciones:
- Las propiedades 'box-shadow' y 'border-radius' no necesitan de hack para funcionar en las últimas versiones de Firefox, Safari, Chrome e ie9.
- Hace mucho dejé de usar hacks (excepto en casos extremos). Para la compatibilidad con diferentes navegadores prefiero utilizar un script de PHP.
Si te estás dedicando a la maquetación, tal vez quieras hecharle una mirada:
http://bastianallgeier.com/css_browser_selector/
ÉXITO!
espero haber sido útil!