如何解決Gmail CSS圖像顯示錯誤？

-1

在Gmail中查看包含圖像的電子郵件時，嵌入式樣式最初會正確加載。不過，如果您點擊「在下面顯示圖片」鏈接打開圖片，這會導致Gmail使用不同的類名稱和ID前綴來重新呈現電子郵件標記。如何解決Gmail CSS圖像顯示錯誤？

問題是，電子郵件仍然使用樣式表的先前版本進行樣式設計，而不更新前綴以匹配當前標記。

這意味着任何取決於類名稱或ID選擇器的CSS規則將在打開圖像時停止工作，只留下元素名稱或通配符選擇器。

我目前使用mailchimp傳遞圖像，但我沒有訪問該圖像元素的代碼（只是合併標籤|圖像|）當Gmail出現此問題時，我無法訪問該圖像元素。任何想法如何做到這一點？

<style> 
.share-img img{ 
max-width: 60%; 
margin-bottom: 5px; 
} 
@media screen and (max-width: 480px){ 
.share-img img{ 
    max-width: 90%; 
    margin-bottom: 5px; 
} 
} 
</style> 
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div>

編輯：

這裏是如何的Gmail預規劃類/ ID與唯一的字符串的一個例子。樣式表'share-img'類和實際上'share-img'類在它們之前有2個不同的字符串，因此它不能正確調整圖像大小。

gmail inspect element image

來源

2017-08-01 tdenk94

歡迎堆棧溢出。我們可以在發送前後看到圖像的代碼嗎？如果它的合併標籤是通過你的列表，或者它是條件語句還是其他東西？ – Syfer

，這是代碼在發送之前被髮送。它正在經歷我的列表，所以它會在數據庫中使用正確的圖像填充圖像標籤。我將編輯我的回答，以包含gmail對它的作用。 – tdenk94

嘗試在媒體查詢480px之前刪除的空間。 Gmail對CSS支持非常惱人。我有一種感覺正在破壞它。使用下面的代碼，看看它現在是否工作。

@media screen and (max-width:480px){ 
.share-img img{ 
    max-width: 90%; 
    margin-bottom: 5px; 
} 
}

乾杯

來源

2017-08-04 01:26:42 Syfer

如何解決Gmail CSS圖像顯示錯誤？

回答

相關問題