電子郵件通訊無法正確呈現

Question

我是新來的CSS和HTML。我有一個HTML和CSS代碼的電子郵件模板。 我把粉圓框在我的通訊模板右上方：http://www.pedersenshotell.se/newsletter/

它看起來確定在Firefox，歌劇等，但是當我把它上傳到通訊電子郵件活動，發送給雅虎，Gmail，Outlook和Hotmail看起來很難看。它顯示一個方形框而不是一個圓圈。爲什麼？

Answer 1

我懷疑該頁面有一個方框而不是一個圓框，因爲您在不支持 border-radius屬性的瀏覽器中查看它。

請參閱 border-radius哪些瀏覽器和版本支持此屬性。

對於border-radius的電子郵件客戶端支持不存在。

這裏的一個解決方案是使用<img>而不是CSS生成的形狀，儘管您還可能會發現電子郵件客戶端會阻止外部內容 - 這是一種安全功能，可能導致頁面由於圖像損壞而變得更糟。既然你已經在頁面上有其他圖像，這可能對你來說不是問題。

Answer 2

電子郵件活動工具（如outlook，gmail，hotmail）中的簡報具有較少的CSS支持。此外，網頁瀏覽器不支持border-radius，而不支持電子郵件客戶端。

對於背景圖像，純圖像，漸變，圓角和3d相關的東西，而不是使用CSS樣式，最好使用<img>。

看到這個參考：http://www.campaignmonitor.com/css/

此引用顯示哪些CSS屬性是由不同的電子郵件客戶端支持。

Answer 3

HTML電子郵件是艱難的事情。電子郵件客戶端通常不是正常的瀏覽器，它們不能正確呈現HTML，您會驚訝爲什麼正常的事情（如背景）不能在那裏工作。

出於安全原因等，Web服務正在刪除/阻止部件。

我會堅持HTML 3.2或更簡單的HTML解決方案，這是非常煩人的，我知道，我建議您使用Fractal這是一個電子郵件驗證器服務來檢查您的工作。

您可以從Email Standards Project獲得提示，以查看哪些功能受支持，哪些不支持。

啊，我幾乎忘了最重要的部分。請在郵件頂部提供一個Web鏈接，以提供基於Web的新聞簡報視圖，通常爲「將此郵件視爲網頁」或「如果電子郵件已損壞，請點擊此處」。

Answer 4

讓你意識到瀏覽器和電子郵件客戶端有兩種完全不同的方式處理HTML和CSS是非常重要的。

在通訊中使用CSS和HTML的所有客戶端都無法使其100％兼容。唯一的辦法，以我的經驗，使通訊100％兼容是通過書面方式的CSS內嵌在HTML標籤，就像這樣：

<td style="height:50px; width:100px; color: red; font-size: 12px; font-family: verdana;"> Content goes here </td>

Answer 5

如前所述HTML電子郵件客戶端有一些問題，這必須是考慮。最重要的問題：內聯你的CSS樣式（大部分時間）。

爲了幫助構建HTML電子郵件，有一些很好的樣板模板。看看http://www.emailology.org/#1或https://github.com/seanpowell/Email-Boilerplate並使用這些模板作爲起點。