我有一个预先设计的 HTML 电子邮件,我使用 Komodo 编辑对其进行了切片和编码。所有内容都在一个表格中,display: block
并且border-collapse: collapse;
已经添加到表格 inline-CSS 和line-height: 0px;
单元格 inline-CSS 中。我一直在使用 EmailonAcid 来测试我的 HTML 电子邮件,似乎正在发生的事情是除了 Outlook 之外的每个电子邮件程序上的一切看起来都很好。Outlook 正在向切片图像添加额外的空白空间,导致周围的内容/图像变得不合时宜。
<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
<p> ALL MY TEXT GOES HERE</p>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
<td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
Text here
<br/>
<span style="font-weight: bold;">£#XX.XX#</span>
</td>
<td colspan="2">
<img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
<td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">
text here
</td>
<td colspan="3">
<img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
<td style="width:" 90px; height: 21px; font-size: 12px;">
<span style="font-weight: bold;">
£#XX.XX#</span> </td>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
<td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
text here
<br/>
<span style="font-weight: bold; ">£#XX.XX#</span>
</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
<td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
#dealername#
<br/>
#contact_number#</td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
<td>
<img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>
有没有摆脱多余的空间?