2012-08-09 16 views
14

En la versión de prueba de Outlook 2013, las imágenes en los correos electrónicos HTML se muestran de forma muy extraña. En lo que puedo ver a través de las pruebas, parece que las imágenes de menos de 20 píxeles de alto tienen un relleno agregado para que tengan 20 píxeles de alto. ¿Hay algo que pueda hacer para cambiar eso? Estos correos electrónicos se ven bien en Outlook 2010 y en cualquier otro lugar donde los haya probado.¿Cómo puedo arreglar la visualización de imágenes en Outlook 2013?

He intentado cambiar la altura de la celda de la tabla que están en (través height="13", así como CSS en línea), así como la mesa y la fila de tabla que se encuentran, todo fue en vano. El código siguiente es un ejemplo sencillo de algo que desencadena este problema, en el que usted será capaz de ver el fondo rojo de la celda por encima de la imagen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" style="background-color:#ff0000;"><img src="image url here" alt="" width="195" height="13" style="display: block" /></td> 
    </tr> 
</table> 
</body> 
</html> 

¿Alguien puede ayudar?

Respuesta

20

Añadir un estilo a la etiqueta line-heighttd (y por si acaso, añadir un atributo a la etiqueta heighttd también).

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="195" height="13" style="background-color:#ff0000; line-height:13px;"> 
     <img src="..." alt="" width="195" height="13" style="display:block;" /> 
    </td> 
    </tr> 
</table> 

El código modificado probó bien en Litmus para todas las versiones de Outlook.

+0

¡Impresionante! ¡Maravilloso! –

+0

Eres un Dios entre los hombres. – GhostInTheSecureShell

+0

Muchas gracias, muchas gracias – Nickool

0

Eliminar cell-padding esto no verá ese bg rojo.

+0

¿Cómo lo haría, que no sea el 'cellpadding = "0"' que ya está dentro de la etiqueta de la tabla? –

-1

Agregue style="display:block;" a cualquier etiqueta de imagen. <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

Esto eliminará el relleno extra.

0

He encontrado que agregar <font size="1"><img /></font> también funciona para solucionar el problema.

Cuestiones relacionadas