CSS adaptable para Internet Explorer
3 seguidores
Hola a todos, diseño con Mac y veo los resultados en Safari y Firefox, últimamente estoy probando algunos menús de Jquery en los que sus autores me indican que en Internet Explorer no funcionan a menos que inserte en mi HTML otra hoja de estilo, con esta línea de código
"<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->",
pero no sé cómo escribirlo para que el navegador lo interprete y, en su caso, lo aplique.
Si alguien sabe cómo he de escribirlo le agradecería mucho que me lo indicase, ya me he currado una página con una buena cantidad de contenidos que funciona perfectamente en Mac pero en Windows da asco verla.
Gracias.
Usuario desconocido
Hola Perruki,
El codigo que has pegado es correcto, tienes que introducirlo tal cual en el HEAD de tu HTML. Te explico un poco por encima, que creo que estas algo perdido.
Eso es un comentario condicional, y significa lo siguiente:
Si el navegador es Internet Explorer 7 o inferior, ejecutar el codigo que hay entre las dos lineas de comentario. En este caso, seria cargar una hoja de estilo en que has modificado lo necesario para que IE muestre correctamente tu pagina.
Yo pondria la linea donde incluyes la hoja de estilo principal antes que el comentario, y luego cargas esta sobreescribiendo los estilos necesarios, para evitar cargar dos hojas enteras innecesariamente.
Tambien puedes echar un ojo a este enlace.
Perruki
Gracias Manuel, me es de mucha ayuda lo que me has escrito, ya que de ahora en adelante me encontraré con este problema muy a menudo, no entiendo cómo con la pasta que tiene Bill Gates no es capaz de contratar a un grupo de desarrolladores capaces de diseñar un navegador a la altura de Firefox, o comprarles la licencia.
En cualquier caso gracias de nuevo, un saludo.
Usuario desconocido
Bueno Perruki, no eres el primero ni el ultimo que se encuentra con este tema. Todos los que solemos maquetar, nos hemos acordado mas de una vez de Microsoft y la madre que los pario, pero es lo que hay. Quedate con el consuelo de que lo mejoran version a version, y que cada vez hay menos gente que utiliza IE6, que es el que se lleva la palma.
Te puedo dar un consejo que a mi me va bastante bien, y es que resetees los estilos default de los navegadores para evitar gran parte de estos problemas. Yo utilizo el reset de Eric Meyer, aunque hay para todos los gustos.
gventura
Yo normalmente lo hago en la misma hoja de estilos y así me olvido de cargar dos hojas y mantenerlas que siempre es más fácil despistarse y no modificar la que toca.
Normalmente me aparecen los mismo errores y ya me los he ido "aprendiendo". Mis típicos errores suelen ser el tamaño de la capa con un padding, la posición de las capas centradas o los floats.
Un ejemplo para el ancho sería:
width:250px; //para todos los navegadores
*width:220px //explorer 7 e inferiores
_width:200px; //sólo explorer 6
Sería parecido al cargar los estilos en el head pero ahorrando tener múltiples ficheros css. El asterisco y el guión bajo realizan el condicional. Tal y como comenta manuelpedrera es mejor cargar primero el bueno y luego las modificaciones para evitar que se guarde el valor que no corresponde a los hacks.
orange
Hackear en la misma hoja de estilos para mi es un error, porque cada vez que salga una nueva versión de explorer (como por ejemplo ahora el 8) vas a tener que revisa todo tu código para ver qué hack pilla, y buscarte una alternativa para ir hackeando cada vez más y más versiones...
Es mucho mejor enlazar CSS específicas para las distintas versiones, de esta manera mantienes tu código "limpio" siempre accesible para todos, y le vas dando a los explorers sólo lo que ellos necesitan. Y si dentro de 15 años sale una nueva versión, sólo tienes que meter una nueva CSS y listo.