Por Pablo, hace 4 años y 3 meses

Problemas de renderización de imágenes en Hotmail y Gmail vistos con Firefox

Firefox está dando varios dolores de cabeza por la forma en que renderiza las imágenes de los mails, tanto en Hotmail como en Gmail.

Aquí tenemos unas muestras de un email enviado por un cliente nuestro, en las pruebas pre-envío. Podemos ver claramente la forma en que agrega un espacio vertical, rompiendo el diseño, a pesar de ser un código sencillo, con tablas y sin mayores complicaciones.  El primero en Hotmail con Firefox, y más abajo en Gmail con Firefox:

Hotmail Firefox Gmail en Firefox

El mismo mail, visto en Explorer 8, renderiza las imágenes de forma impecable (primero en Gmail y luego Hotmail, ambos vistos en Explorer 8):

Gmail Explorer8 Hotmail Explorer8

La solución nos la mostró Aaron Smith, un colega de Estados Unidos, que resolvió el inconveniente agregando la siguiente línea de código <style>img {display: block;}</style>

En el caso de Hotmail, debe ir inmediatamente después de la etiqueta <body>, ya que Hotmail tiene la mala costumbre de quitar todos los estilos que encuentre entre <head> y </head>.

En el caso de Gmail, la solución resulta un tanto más tediosa, ya que como Gmail es aún más intolerante con los estilos, deberemos incluír el código en cuestión dentro de cada imágen, de esta manera:

<img src='http://www.jetmails.com/img/imagen.jpg' alt='JetMails'  border='0' height='40' width='40' style='display:block'>

Tengamos en cuenta que esto afecta exclusivamente al webmail, es decir, si un suscriptor ha configurado el  pop o imap de Gmail podrá ver el mail tal cual ha sido diseñado.

Hasta la próxima! ;)


1 comentario

#1. kelucia, hace 2 años y 7 meses

Hola!
Permíteme presentarme soy Kelucia administradora de un directorio de blogs, visité tu portal y está interesante, tienes temas muy buenos. Me encantaría poner un link de tu web en mis sitios y así mis visitas puedan visitarlo también. Si estás de acuerdo no dudes en escribirme
Keluciaquintana@gmail.com
Éxitos con tu blog.
Saludos

Kelucia

Escribir un comentario

Si quieres añadir tu comentario a esta entrada, simplemente rellena el siguiente formulario:





* Campos requeridos

Puedes usar estas etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>.

1 trackback

Para notificar de una mención en tu blog a esta entrada, habilita la notificación automática (Opciones > Discusión en WordPress) o especifica esta url de trackback: http://​www.pablocarosone.com/​problemas-de-renderizacion-de-imagenes-en-hotmail-y-gmail-vistos-con-firefox/​88/​trackback/