2012-08-09 20 views
14

Nella versione di prova di Outlook 2013, le immagini nelle e-mail HTML vengono visualizzate in modo molto strano. Per quanto posso capire attraverso i test, sembra che le immagini più corte di 20 pixel di altezza abbiano il riempimento aggiunto per renderle alte 20 pixel. C'è qualcosa che posso fare per cambiarlo? Queste e-mail sono perfette in Outlook 2010 e in qualsiasi altro luogo le ho testate.Come posso correggere la visualizzazione delle immagini in Outlook 2013?

Ho provato a cambiare l'altezza della cella sono in (attraverso height="13" nonché linea css) nonché la tabella e la riga della tabella si trovano, tutto inutile. Il codice seguente è un semplice esempio di qualcosa che fa scattare questo problema, nel senso che si sarà in grado di vedere il fondo rosso della cella sopra l'immagine:

<!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> 

chiunque può aiutare?

risposta

20

aggiungere uno stile line-height al tag td (e per buona misura, aggiungere un attributo al tag heighttd pure).

<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> 

Il codice modificato testato bene in Litmus per tutte le versioni di Outlook.

+0

Fantastico! Meraviglioso! –

+0

Sei un Dio tra gli uomini. – GhostInTheSecureShell

+0

Grazie mille grazie davvero – Nickool

0

Rimuovi cella-padding questo non si vedrà che bg rosso.

+0

Come farei questo, a parte il 'cellpadding = "0"' che è già all'interno del tag della tabella? –

-1

Aggiungi style="display:block;" a qualsiasi tag immagine. <img src="/img/s.gif" width="1" height="1" alt="" style="display:block;">

Questo rimuoverà quella imbottitura extra.

0

Ho trovato che l'aggiunta di <font size="1"><img /></font> funziona anche per risolvere il problema.

Problemi correlati