spazio extra aggiunto in HTML e-mail quando vengono inviati da Outlook a Gmail

Question

Se apro la seguente e-mail HTML in Gmail o Outlook rende come dovrebbe:

<img src="img.png" /> 

Tuttavia, se l'apro in Outlook e le inoltrerà a Gmail, aggiunge HTML spazzatura in più che rende la zona più alta di quello che dovrebbe essere (il tag 'p' è responsabile per l'altezza aggiunto - 3px in particolare):

<p class="MsoNormal"> 
    <span style="font-size:10.0pt"> 
     <img src="img.png"> 
     <u></u> 
     <u></u> 
    </span> 
</p> 

ci sono un sacco di soluzioni per risolvere i problemi di spaziatura in Gmail, come aggiungere display: bloccare l'immagine, impostare la dimensione del carattere e la linea -altezza fino a 0, ecc. Ho provato più di una dozzina di metodi e nessuno ha funzionato a causa di modifiche HTML dietro le quinte di cui non ho alcun controllo su: stili e attributi rimossi, tag con le loro proprietà aggiunte, ecc.

C'è una soluzione per consentire sempre la conservazione della formattazione originale? Fornirò volentieri tutti i dettagli aggiuntivi necessari, fammelo sapere.

Answer 1

Non c'è alcuna correzione per questo, ma ci sono modi per limitare e nascondere la dimensione della separazione. Mi riferirò ad esso come separazione, ma è in realtà l'espansione della cella superiore a causa dell'applicazione di Outlook con il tag p mso-normal. Here is a related article.

Tra le tabelle crea uno spazio maggiore (circa 15px) rispetto alle righe di tabella (2px). È più complesso, ma prova a mettere tutto ciò che non puoi permetterti di separare in un unico grande tavolo. Colspans e rowspans possono essere complessi, ma funzionano se impostati correttamente.

Per nascondere la separazione, avvolgere tutte le tabelle in una tabella di contenuto principale con il set bgcolor. Ad esempio, imposta un riquadro del contenuto grande su bianco. Quando si invia da Outlook, tutte le tabelle figlio si sposteranno, ma gli spazi rimarranno bianchi, fermando le linee indesiderate che appaiono nel tuo corpo di posta elettronica.

Un trucco per i piè di pagina - Come l'ultima tabella figlio del pannello bianco principale, quando questo si separa, creerà una linea bianca al di sotto di esso. Rimuovi la tabella del footer dal pannello principale o imposta la cella bgcolor allo stesso valore dello sfondo della tua e-mail per nascondere questa separazione.