1
我有一個電子郵件的內容塊，因爲我不希望它在Outlook中工作。該塊還需要在移動設備上工作，應該看起來像這樣在瀏覽器/桌面上：Outlook不尊重我的「按鈕」背景顏色
。
在所有瀏覽器中，除Outlook外，這看起來很完美。在Outlook中，它會從按鈕的整個白色背景顏色（它實際上減少下來的文本內容），它看起來神可怕：
這裏是我的框代碼：
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td width="20"> </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
<tr>
<td class="full" dir="ltr" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH IMAGE PART-->
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
</tr>
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
<td class="full" dir="ltr" valign="top" width="50%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH TEXT AND TITLE PART-->
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
<td width="20"> </td>
</tr>
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
和類CTA如下：
cta {
margin: auto;
display: inline-block;
background:#ffffff !important;
}
/* BUTTON STYLES */
cta {
padding: 15px 15px;
width: 150px;
font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
font-size: 14px;
font-weight: bold;
color: #8b8b93;
background: #ffffff !important;
border: 1px solid #8b8b93;
font-weight: bold;
align-content: center;
}
_「和類CTA如下：」 _ - 什麼課？您正嘗試在此選擇帶有_tag name_'cta'的元素。 – CBroe
可能是題外話題，但在源代碼中保留'width =「」'不是個好主意。我知道'width =「」'被解釋爲'width =「1」'的情況。 –