09 de septiembre de 2010 ¡Bienvenid@! / Welcome! Añadir a favoritos

Hack para ajustar las hojas de estilo css en Internet Explorer 7

04 de julio de 2007 - 6564 lecturas - 4 comentarios - Categorías: CSS. - Posteado por David Bayón.

Con la llegada de la nueva versión del navegador de Microsoft, Internet Explorer 7, el tan conocido "hack del guión bajo" para ajustar las hojas de estilo css ha dejado de resultar efectivo. Sin embargo no hay que llevarse las manos a la cabeza, puesto que ya existe un nuevo "hack" para solucionar este problema:

El "hack del asterisco", que también funciona en Internet Explorer 6. Por tanto si ya tienes diseñadas tus css y quieres que también reconozca estos "hacks" IE7, lo único que habría que hacer es sustituir los " _ " por " * " (Sin las comillas, por supuesto).

Vamos a verlo con un ejemplo:

Si queremos aplicar un padding-top de 10px para todos los navegadores excepto Internet Explorer, para el que deseamos un padding-top de 20px haríamos lo siguiente:

#ejemplo{

padding-top:10px;   /*Para todos los navegadores excepto Internet Explorer.*/

*padding-top:20px; /*Para internet Explorer.*/

}

Nuevo comentario:
Nombre*.
E-mail*. (no será publicado)
Blog o página web (http://...).

Comentario*:


(* Campos necesarios)
Comentarios anteriores:
Autor: David Bayón
Fecha: 30/6/2008 (10:25)
Comentario:

Sergio, primero tienes que asegurarte de que el problema de tu web se debe a un desajuste de las hojas de estilo (css).

Lo digo porque he visitado tu página y me ha dado la impresión de que más que moverse algunos elementos, lo que ocurre es que en Internet Explorer aparece una lista punteada arriba a la derecha que no sale en Firefox.

En caso de que efectivamente se deba a un desajuste de las CSS, lo más fácil es utilizar los pequeños hacks que existen para Internet Explorer, como se explica en este post y en mi comentario del 26/2/2008:

- Atributo sin nada delante: Lo interpretan todos los lenguajes (así se optimiza para Firefox -y otros...- y se ve movido en Internet Explorer).

- Atributo con asterisco delante: Lo interpretan Internet Explorer 6.0 y 7.0 (se ve movido en Internet Explorer 6).

- Atributo con guión bajo delante: Lo interpreta sólo Internet Explorer 6.0.

De este modo es posible ajustar al detalle cualquier atributo para los tres navegadores. La desventaja es que lleva más trabajo...

Suerte!


Autor: sergio david de la cruz perez
Fecha: 30/6/2008 (08:02)
Comentario:

Disculpa apenas estoy conociendo los hacks me intriga mi pagina se ve excelente en firefox pero ciertos elementos se mueven de pocision en internet explorer que debo hacer para solucionar esto, esta es la pagina

http://www.siemprejovenes.innovasistems.com.mx

problematica: firefox vs internet explorer 7


Autor: David Bayón
Fecha: 26/2/2008 (22:25)
Comentario:

Hola Vidar,

Una alternativa para conseguir exactamente el mismo efecto en todos los navegadores es utilizar primero el hack del asterisco para ie7 y a continuación el del guión bajo para ie6.

Por ejemplo:

#cabecera{
margin:20px;
*margin:15px;
_margin:10px;
}


Autor: Vidar
Fecha: 26/2/2008 (21:59)
Comentario:

lo siento chico pero este hack no es suficiente ya que el valor que asignas con el "*" no tiene el mismo resultado de ie6 a ie7.
Efecto hace, pero el resultado no es el mismo.


ActualidadInformáticaTelecomunicacionesTiempo libre
  • Economía
  • Opinión
  • Política
  • Tecnología
  • Diseño web
  • Hardware
  • Seguridad informática
  • Software
  • Antenas
  • Redes informáticas
  • Telefonía
  • Televisión
  • Tratamiento digital de señal
  • Curiosidades
  • Deportes
  • Espectáculos
  • Humor
  • Música
  • Películas
  • Reflexiones
  • Viajes
  • Portada
  • ¿Qué es DavidBayon.net?
  • Perfil profesional
  • Perfil personal
  • Contáctame
  • Archivos
  • Libro de visitas
  • Enlaces
  • Ir arriba
    Creative Commons License Esta obra es propiedad de David Bayón Esporrín y está bajo una licencia de Creative Commons. Se puede reproducir el contenido citando la fuente y colocando un enlace en un lugar visible a su ubicación original en DavidBayon.net.