1. 首頁
  2. 問答
  3. 身體背景顏色不適用於電子郵件通訊

身體背景顏色不適用於電子郵件通訊

2014-05-14 80 views

回答

5

主體元素被大多數的郵件客戶端忽略。如果你需要一個背景，你必須創建一個容器元素併爲其添加背景。

來源

2014-05-14 09:33:31 GolezTrol

1

因爲大多數手機和平板電腦會正確調整電子郵件大小，因此身體寬度理想情況下應該爲640。

來源

2014-05-14 09:42:20 indofraiser

+3

不，身體應該始終是100％，然後您應該使用'​​'標籤來定義容器寬度 – Lodder

1

每個電子郵件客戶端都以不同的方式處理事情，所以有些人將身體剝離，其他人則不會。

我會對您的代碼做一些更改。首先，使用而不是。儘管div可以在大多數客戶端上運行，但您可以更靈活地使用表格，因爲它們會根據查看的大小來調整大小。將所有內容都包裝在單個單元格表格中，並將背景顏色應用於該元素。

最後，您需要在手機上進行一些測試，因爲它們的平均寬度只有460px，最大寬度應該是760px，而不是860px。例如，您的郵件目前不會顯示在肖像iPad上。

http://putsmail.com/對測試非常有用。

來源

2014-05-14 09:42:21 PeteAUK

4

嘗試使用這樣的：

<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
       <td width="650" valign="top" align="center" bgcolor="#efefef"> 
        .... 
       </td> 
     </tr> 
    </table> 
</body>

標籤現在是電子郵件模板的容器包裝。由於某些電子郵件客戶端剝離了身份標記，因此您將擁有100％的表格以回退所有客戶端支持的表格。

我也建議使用您的<head>標籤以下內容：

<style type="text/css"> 
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 
    .ExternalClass {width:100%;} 
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
</style>

這確實下列就像幾個演員：

  • 防止WebKit和Windows Mobile的更改默認字體大小平臺，而不是打破桌面設計。
  • 強制Hotmail以全寬度顯示電子郵件。
  • 強制Hotmail顯示正常行間距。

來源

2014-05-14 09:42:23 Lodder

1

Body元素並不總是被忽略（特別是在Outlook中），但是您也應該將它與全寬表配對作爲後備。這也是一個很好的方法，使轉發背景顏色保持白色，而你的html區域背景仍然是別的東西。

這裏是一記基本設置與此：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> 
    <style type="text/css"> 
    /* Client-specific Styles */ 
    #outlook a {padding:0;} 
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */ 
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */ 
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;} 
    table td {border-collapse: collapse;} 
    </style> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;"> 

<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td bgcolor="#FFFFFF" style="padding:30px;"> 
     Content here 
    </td> 
    </tr> 
</table> 

</td></tr></table></td></tr></table></body></html>

在一個側面說明，如果你想有一個backgorund圖像，有2種方法在HTML電子郵件。 See this answer瞭解更多詳情。

來源

2014-05-15 18:24:58 John

相關問題

 相關問題