GMail，MailChimp在表格中添加圖像之間的間距

我在使用GoogleMail Web客戶端收到的電子郵件格式時遇到問題。GMail，MailChimp在表格中添加圖像之間的間距

表格中的圖像在我的內容中出現空白之後添加了空格，與此問題完全相同 - Gmail displaying gaps between images。

添加內聯樣式'display：block'修復了MailChimp預覽中的問題。

但是，內嵌圖像樣式在我之間的某個位置被刪除，在MailChimp中預覽它們並在我的收件箱中接收它們，重新添加內聯CSS會再次手動修復它，所以這絕對是問題。

風格MailChimp模板時Googlemail電子郵件

<img src="IMAGE_PATH" alt="" border="0" width="700" height="665">

閱讀

<img src="" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" style=" width: 700px; display: block;">

風格有發生這種情況的一個原因？它是在MailChimps還是GoogleMails方面？

來源

2013-03-28 Sam

它看起來像Gmail剝離了style屬性，因爲它不喜歡某些東西。

有幾件事情嘗試：

1）在你的風格聲明的開頭刪除多餘的空間：

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
    mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
    style="width:700px; display:block;">

2）指定!important：（參考：http://www.campaignmonitor.com/blog/post/3652/gmail-strips-out-inline-css）

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
    mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
    style="width:700px; display:block !important;">

3）嘗試將line-height添加到包含td元素：（參考：http://www.webdevdoor.com/html-css/html-email-development-tips/）

<td style="line-height:0px;"> 
    <img src="" id="headerImage campaign-icon" mc:label="header_image" 
     mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
     style="width:700px; display:block;"></td>

還有一試試

4）添加width="700"屬性（也許在折騰height爲好），以img標籤，只有在style屬性指定display:block;：

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
    mc:edit="header_image" mc:allowdesigner="" mc:allowtext="" 
    width="700" height="665" style="display:block;">

這是另一個

5）HTML5文檔類型會導致渲染問題。嘗試使用這個：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

最後一個...

6）只注意到你設置mc:allowdesigner=""和mc:allowtext=""，會發生什麼，如果你刪除這兩個的=""？

<img src="" id="headerImage campaign-icon" mc:label="header_image" 
    mc:edit="header_image" mc:allowdesigner mc:allowtext 
    style="width:700px; display:block;">

希望它們中的一個能爲你工作。

來源

2013-04-03 13:26:32 fletch

我已經嘗試了所有這些解決方案，除了行高之外，但我99％肯定它不會工作，我會回到你身邊，歡呼聲 – Sam 2013-04-03 13:59:27

我已經嘗試了所有這些現在，風格仍然被刪除（並且我無法真正擁有固定的高度，圖像與模板無關（模板與不同的圖像重複使用），因此固定的高度真的是最後的手段 – Sam 2013-04-04 08:16:18

爲什麼不發佈您的模板代碼並將它放到http://jsfiddle.net/ ...也許還有其他的事情正在發生，或者有另一種方法來構造它以避免該問題。 – fletch 2013-04-04 12:21:48

這絕對是而不是這種情況下，Gmail總是會刪除圖像上的style="display: block"。作爲@Fletch指出，最簡單的事情將是這樣：

<img src="" id="headerImage width="700" style="display: block;">

...而不是使用內嵌樣式設置width。無論如何，Outlook 07/10在某些情況下不會遵守使用style設置的寬度，因此最安全的方式是設置它。或者完全忽略寬度（對於響應式電子郵件設計來說是必需的）。

您需要將完整的代碼放在某個地方，因爲它必須是HTML中導致問題的其他內容，因爲上述代碼完美無缺。

來源

2013-04-04 13:29:44 CherryFlavourPez

我知道上面的代碼工作，我已經有其他電子郵件沒有剝離style ='display：block;'如上所述我已經嘗試過，沒有寬度和許多其他組合 – Sam 2013-04-04 14:28:01

當我在MailChimp編輯器中添加圖像時，我的問題中第二個圖像的高度自動由MailChimp添加 – Sam 2013-04-04 14:29:13

因此需要完整的代碼模板：我通過MailChimp發送了電子郵件，沒有任何問題。 – CherryFlavourPez 2013-04-04 15:17:57

對我來說的幫助（添加< P類= 「保證金：0;字體大小：0;行高：0;」>在< TD>）：

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img src="{IMG_PATH}/w_bottom.jpg" 
alt="" height="8" width="653"/></p></td>

來源

2014-12-05 13:15:33

謝謝！這對我來說確實是個問題，Gmail會自動添加我的代碼缺失的段落。 – Lynxy 2015-02-13 14:42:10

這很好。謝謝！ – 2015-02-24 16:50:09

Gmail的自動添加一個段落標記到表格數據標記。添加樣式爲我工作的段落標記。

<td><p style="margin: 0;font-size: 0;line-height: 0;"><img /></p><td>

來源

2015-05-05 16:07:34 Dustin

我用這個掙扎了很長一段時間，加入這部分。

table{ 
     border:0px; 
     border-spacing:0px; 
     border-collapse:collapse; 
    } 
td{ 
     line-height:0px; 
    } 
tr{ 
     display:block; 
}

我希望這可以解決您的問題，因爲這對我來說是相當令人沮喪的問題。

來源

2016-01-11 22:22:43

GMail，MailChimp在表格中添加圖像之間的間距

回答

相關問題