Outlook 2013 Tagliare la parte superiore dell'immagine?

Question

Sto configurando un modello di email e la parte superiore di alcune immagini è stata tagliata. Questo è il mio codice per le immagini

<td style="line-height: 0"><img src="http://domain.com/image.png"></td> 

ho l'altezza della linea del TD in modo che lo spazio bianco sotto verranno rimossi perché voglio che venga a contatto con l'immagine qui sotto.

L'immagine in alto ha un po 'la parte superiore, tuttavia, come posso risolvere questo problema?

Answer 1

Il modo in cui ho fissato questo è stato quello di non usare line-height e invece impostare l'immagine da visualizzare a blocchi e questo ha fissato i problemi di immagine e ancora rimosso lo spazio bianco sotto

<td><img src="http://domain.com/image.png" style="display:block;"></td> 

Spero che questo aiuti qualcuno!

Answer 2

utilizzare Alway Display:block su tutte le immagini, altrimenti si otterrà alcuni spazi bianchi di volta in volta :)

Answer 3

miei test dimostrano che in Outlook 2013, a differenza delle versioni precedenti di Outlook, l'impostazione line-height a 0 farà sì il contenitore deve essere più piccolo dell'immagine contenuta. Il risultato è che la parte superiore dell'immagine contenuta è ritagliata. L'unico modo per risolvere il problema era impostare l'altezza della linea su un valore diverso da 0. Ho usato l'altezza della linea: 17px e le immagini sono state visualizzate correttamente. Potrebbe funzionare con qualsiasi altro valore diverso da 0: non ho testato valori inferiori a 17px.

Impostazione display: il blocco non ha risolto questo problema. Poiché questo è SOLO un problema con Outlook 2013 e non influisce su versioni precedenti di Outlook o altri client di posta elettronica mobili o desktop, è sicuro che si tratti di un bug di Outlook 2013 e che non è prevista una correzione da Microsoft. Quindi, se qualcuno può confermare le mie scoperte, sarebbe una buona idea integrare semplicemente questa soluzione alternativa nella tavolozza già surdimensionata di soluzioni alternative per supportare il povero supporto di posta elettronica HTML di Microsoft.

Answer 4

Ho riscontrato questo problema in MailChimp durante l'inserimento di immagini in blocchi di testo. Per risolverlo, ho impostato l'altezza della linea per i blocchi di testo in doppio spazio. Successivamente, ho reimpostato tutti gli stili per ogni blocco nel mio modello. Spero che questo ti aiuti!

Answer 5

Ho avuto lo stesso problema con il 2013/16.

La soluzione migliore è specificare che l'altezza della riga è espressa in pixel.

Modifica line-height:0; a line-height: 0px.