1

我有一个预先设计的 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>

有没有摆脱多余的空间？

4

2 回答 2

1

试试 style="line-height: 0px;" 在表格单元格上。

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

于 2013-09-04T12:06:05.810 回答
0

问题是切片完整布局有时会为图像创建不必要的空白，因为完整布局切片不能正确证明布局的trs和tds。我建议您需要在dreamweaver 中创建一个表格，然后只切片您需要的图像并手动放置它们。这将解决您的问题。我实际上已经做到了，它对我有用。

于 2013-09-04T09:20:41.447 回答