HTML電子郵件格式化搞砸

大家好，我正在嘗試發送一封HTML中的電子郵件，當然我知道Outlook中不支持格式化和很多CSS，但我想知道爲什麼這個簡單的東西顯示壞了，有沒有快速修復或解決方法/替代方案？看一下按鈕應如何顯示：HTML電子郵件格式化搞砸

但他們似乎是這樣的：

這裏是它的代碼：

<tr> 
    <td style="display:block;min-height:38px;max-height:38px;"> 
     <p style="margin-left:15px;"> 
      <a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;" 
href="link here..">Enquire</a> 
      <a href="link here.." style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;float:left;">Full Details</a> 
     </p> 
    </div> 
    </tr> 
</td>

來源

2014-04-11 user3332590

除非它改變了我認爲Outlook使用Word作爲引擎來查看HTML電子郵件（我認爲是奇怪的）所以這很可能是另一個煩人的簡單的事情，不工作。 KM123解決方案，而不是一個圖像是一個不錯的選擇。 –

至少你的'tr'和'td'結束標記是錯誤的，'div'結束標記從頭開始出現。 – Pietu1998

，電子郵件營銷我建議你使用一個圖像作爲你的按鈕。特別是如果這是一個行動號召。你不想被打破的一件事是，你可以信任它的唯一方法就是不用，那就是在表格單元格中使用圖像。

我希望有幫助！

來源

2014-04-11 08:42:12 KM123

Outlook中不支持背景圖像。 – user3332590

切勿使用背景圖片。您應該將整個按鈕設爲圖像，然後使用，然後將其包裝在鏈接中 – KM123

您是否嘗試過給背景顏色<td>？（或其他容器）

來源

2014-04-11 08:44:34 Hauke

您也可以嘗試

<a href="#"> 
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span> 
</a>

我沒有在Outlook中測試，但它可能工作。

來源

2014-04-11 08:50:28

此線程中有一些錯誤信息。

您可以使用圖片作爲按鈕，但更高級的設計師現在趨向於「防彈」按鈕。它們顯示圖像關閉。請參閱此鏈接：buttons.cm

背景圖像在Outlook中受支持，但僅在<body>標籤中或使用VML支持，請參閱上面的buttons.cm鏈接或backgrounds.cm的示例。

回到你的具體的例子，也有一些方法來完成它，但這裏是我會怎麼做：

<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;"> 
    <tr> 
    <td style="padding-top:20px; padding-bottom:10px;"> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="50">&nbsp; 
      </td> 
      <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;"> 
      <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Enquire</a> 
      </td> 
      <td width="20">&nbsp; 
      </td> 
      <td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;"> 
      <a href="" style="color: #FFFFFE; font-weight: bold; text-decoration: none;">Full Details</a> 
      </td> 
      <td width="50">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

在一個側面說明，你需要使用6位十六進制顏色在HTML電子郵件，也不要浪費與下面的CSS屬性您的時間，因爲他們有不一致的支持：

margin（使用padding代替）
text-align（使用align=""代替）
min-height & max-height
float（使用ALIGN = 「」代替）
background-color（使用bgcolor=""代替）

此外，避免像padding:5px 5px 0px 5px;簡寫。不幸的是，你需要寫出來padding:5px; padding-bottom:0;

來源

2014-04-11 14:04:46 John

使用圖像不是最好的解決方案，尤其是因爲大多數時間電子郵件都呈現沒有圖像，直到用戶接受查看圖像。

的方式我這樣做是在一個表的表，所以這樣的事情：

<table width="outside container width here"> <tbody> <tr> <table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned"> <tbody><tr><td><a href="#link">Your button actually goes here</a></td></tr></tbody> </table> </tr> </tbody> </table>

來源

2016-07-19 14:24:45 zsawaf

HTML電子郵件格式化搞砸

回答

相關問題