Question

我有一个预先设计的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;">&#163;#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; ">

                &nbsp;
                &nbsp;
                &nbsp;

           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;">
                &nbsp;
                &nbsp;
                &#163;#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; ">&#163;#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>

有没有摆脱多余的空间？

Answer 1

尝试style =“line-height：0px;”在桌子上。

同时仔细查看表格单元格和图像的宽度和高度是否正确并正确设置。

Answer 2

问题在于切片完整布局有时会为图像创建不必要的空白区域，因为完整的布局切片无法正确地证明布局的trs和tds。我建议您需要在Dreamweaver中创建一个表，并仅切片您需要的图像并手动放置它们。这将解决您的问题。我几乎已经做到了，它对我有用。

如何摆脱HTML电子邮件中图像和表格单元格周围的空白区域

2 个答案: