Seguro has estado en esta situación: Terminas de maquetar tu sitio web y al probarlo en Internet Explorer hay cosas que aparecen corridas, o peor, ni siquiera se ven.
En este artículo te comparto una guía de consejos para lograr la mayor compatibilidad con Internet Explorer.
Reglas de Oro para la Compatibilidad Internet Explorer
Estos son solo algunos consejos para lograr mayor compatibilidad con el navegador Internet Explorer, pero recuerda que algunas situaciones requieren una análisis y una solución exclusiva para cada caso.
1 – Limita el uso de la posición absoluta o relativa.
Si vas a crear un pop-up esto es inevitable. Cada vez que se tiene que mezclar elementos extrañamente colocado (a través de CSS) en línea con otros elementos, las alineaciones están obligados a estar fuera. Si usted se esfuerza para la perfección de píxeles perdidos lejos de la posición de CSS: absolute; posición y: relativo.
2 – No uses números negativos.
Esto es especialmente para los marings y paddings.
IE no se lleva bien con los negativos.
3 – Usa divs del tipo Wrappers (contenedores) para agrupar a los elementos.
El wrapper mas conocido es el primer div de nuestro contenido, el cual agrupa a todos los demas y por lo general tiene márgenes del tipo «auto» para que quede centrado, todos los elementos secundarios interiores deben ser los bloques flotantes, es decir, float: left; (me refieron a los divs, y no a los demas elementos como parrafos o textos)
4 – Los Links
Intenta usar siempre la opción display:block; también usa line-height y/o padding para dale tamaño al bloque. Esto hace que el are de rollover sean mucho mas grande y eniquece la experiencia del usuario.
Incluye siempre links de tipo texto, esto ayuda al posicionamiento en buscadores. Si tienes un link de imagen que incluye texto, usa text-indent:-9999px; para esconder el texto. Si deseas que esto también funcione en versiones antiguas de IE, utiliza display:block; line-height:0; font-size:0;.
Lo browsers mas modernos solo requieren text-indent:-9999px;
5 – Intenta no usar «! Important» en el CSS.
! Important escrito después de un estilo, por ejemplo «width: auto importante,» va a ignorar todas las reglas de jerarquía dentro de CSS y esencialmente sustituyen a todos los estilos de los demás «width» aplicados a este elemento.
6 – Intenta no usar condicionales del tipo IF.
Utiliza esto sólo después de rigurosas pruebas.
7- Chequea y RE-chequea la estructura del HTML
IE es muy exigente con los cierre de los elementos o etiquetas. Algunas páginas incluso no terminar de cargar. Comprueba tu código y asegurate que todo está cerrado correctamente.
Los navegadores más recientes tienden a auto-corregir estos errores. Usa un editor de texto que chequea automaticamente el cierre de etiquetas. Notepad ++ y Dreamweaver ambos tienen esta característica.
8 – No coloques etiquetas UL dentro de etiquetas LI
Al crear una navegación anidada con varias listas del tipo UL no incluyas otra UL dentro de una etiqueta LI de primer nivel. Con el fin de crear una navegación anidada que funcione en todas las versiones de Internet Explorer, debes crear un contenedor DIV para incluirlas.
te odio internet explorer ¬¬
Ahora mismo tengo un menú dropdown con javascript y css que no se ve bien en ie8 >_<
la solucion que le veo es hacer un css solo para ie un "if ie" como dices, después de rigurosas pruebas.
Sinceramente no entiendo esto:
«Si vas a crear un pop-up esto es inevitable. Cada vez que se tiene que mezclar elementos extrañamente colocado (a través de CSS) en línea con otros elementos, las alineaciones están obligados a estar fuera. Si usted se esfuerza para la perfección de píxeles perdidos lejos de la posición de CSS: absolute; posición y: relativo.» ¿Podrías aclararlo por favor?
Gracias y muy bueno el blog!!
Significa que debes comprobar las posiciones relativas y absolutas si utilizas display: inline.
🙂