【发布时间】：2015-03-21 01:33:51
【问题描述】：
这是一封用于我公司营销目的的 html 电子邮件。我们从 themeforrest 购买了一个模板并从那里进行了编辑。我已经解决了 Outlook 引起的大部分问题，但似乎无法找到此问题的问题根源。
在电子邮件的一个部分中，我有一个带有标题部分的表格，另一个表格有两列分为各自的 .当我将电子邮件通过 Litmus 进行测试时，表格中的右列看起来比左列长。我已经检查并分析了代码，就标签和属性而言，每一列都是相同的。我对编码比较陌生，所以我使用的是带有预览功能的 MailChimp html 编辑器，代码可能没有应有的干净。
这是我所做的：
- 表格中的所有元素都有自己的
- 文本和间隔容器的声明高度
- 容纳文本的容器具有相同的高宽比
- 上方和下方的垫片高度和宽度比例相同
- 我认为文本的长度可能会导致问题，因此我编辑了较长的文本以适应相同数量的行。运气不好。
- 我测试了上面包含和不包含 CSS 的部分。同样的问题。
- 我所做的唯一真正改变的事情是编辑列上方标题的节点。这似乎改变了列的位置，但不是以有益的方式。而且我需要标题部分的文本容器和节点的高度保持不变，因为它是我遇到的另一个 Outlook 问题的解决方案，它使绿色条的高度扩展到上面的行高它。
- 研究过 CampaignMonitor 和 EmailonAcid 的解决方案
这是该部分的代码：
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="bfbfbf" mc:repeatable="promail" mc:variant="testimonials section" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="center" style="border-collapse: collapse;">
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="container800 blue_bg" style="background-color: rgb(255, 255, 255);border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr><td height="50" style="font-size: 50px;line-height: 50px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="border-collapse: collapse;">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="center" style="color: #666666;font-size: 14px;font-family: 'Open Sans', Arial, sans-serif;font-weight: 700;mso-line-height-rule: exactly;line-height: 24px;border-collapse: collapse;" class="outlook white_color" mc:edit="testiheader">
<!-- ======= main header ======= -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
TESTIMONIALS
</span>
</div>
</td>
</tr>
<tr><td height="12" style="font-size: 12px;line-height: 12px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="border-collapse: collapse;">
<table align="center" width="50" border="0" cellpadding="0" cellspacing="0" bgcolor="0893d3" class="blue_bg" style="background-color: rgb(9, 187, 77);border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr><td height="2" style="font-size: 2px;line-height: 2px;border-collapse: collapse;"></td></tr>
</tbody></table>
</td>
</tr>
<tr><td height="12" style="font-size: 12px;line-height: 12px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="color: #000000;font-size: 28px;font-family: 'Open Sans', Arial, sans-serif;font-weight: 300;mso-line-height-rule: exactly;line-height: 28px;border-collapse: collapse;" class="outlook main-header white_color" mc:edit="testisubheader">
<!-- ======= main header ======= -->
<div class="outlook editable_text" style="line-height: 28px;">
<span class="outlook text_container">
What Do Our Customers Say?
</span>
</div>
</td>
</tr>
<tr><td height="55" style="font-size: 55px;line-height: 55px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="285" align="left" cellpadding="0" cellspacing="0" bgcolor="09bb4d" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-radius: 5px;font-size: 14px;border: 0;" class="container590">
<tbody><tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="230" height="168" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;height: 168px; font-size: 14px;border: 0;" class="container580">
<tbody><tr>
<td align="left" style="color: #ffffff;font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 24px;border-collapse: collapse;" class="outlook text_color" mc:edit="testitext1">
<!-- ======= section subtitle ====== -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
This is an extremely good company. My agent Brent was excellent, and very timely in explaining the terms, and getting my loan ASAP. Thank you, very much, I will Highly recommend you!<br><br>
</span>
</div>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td style="border-collapse: collapse;">
<a href="" style=" border-style: none !important; display: block; border: 0 !important;" class="editable_img"><img editable="true" src="https://gallery.mailchimp.com/5ed1d967731cd6ee36b103443/images/735223a6-a047-4079-8a5e-ffdd8d30e29b.png" style="display: block; width: 50px;" width="50" border="0" alt="team img" mc:edit="testiimg1"></a>
</td>
<td style="border-collapse: collapse;"> </td>
<td style="border-collapse: collapse;">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="left" style="color: #444444;font-size: 16px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook title_color" mc:edit="testisubtitle1">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Linda
</span>
</div>
</td>
</tr>
<tr>
<td align="left" style="color: rgb(68, 68, 68);font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook blue_color" mc:edit="testisubtitle2">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Happy customer
</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
</tbody></table>
<table border="0" width="2" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;" class="container590">
</table>
<table border="0" width="285" align="right" cellpadding="0" cellspacing="0" bgcolor="09bb4d" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-radius: 5px;font-size: 14px;border: 0;" class="container590">
<tbody><tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="230" height="168" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;height: 168px; mso-table-rspace: 0pt;font-size: 14px;border: 0;" class="container580">
<tbody><tr>
<td align="left" style="color: #ffffff;font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 24px;border-collapse: collapse;" class="outlook text_color" mc:edit="testitext2">
<!-- ======= section subtitle ====== -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
This company is very dedicated to their customers! Very organized! Always quick and orderly with every step of the process! Truly a great company to work with! Great people to talk to, who you can understand and never feel lost in the process!
</span>
</div>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td style="border-collapse: collapse;">
<a href="" style=" border-style: none !important; display: block; border: 0 !important;" class="editable_img"><img editable="true" src="https://gallery.mailchimp.com/5ed1d967731cd6ee36b103443/images/735223a6-a047-4079-8a5e-ffdd8d30e29b.png" style="display: block; width: 50px;" width="50" border="0" alt="team img" mc:edit="testiimg2"></a>
</td>
<td style="border-collapse: collapse;"> </td>
<td style="border-collapse: collapse;">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="left" style="color: #444444;font-size: 16px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook title_color" mc:edit="testisubtitle3">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Sarah
</span>
</div>
</td>
</tr>
<tr>
<td align="left" style="color: rgb(68, 68, 68);font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook blue_color" mc:edit="testisubtitle4">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Happy customer
</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="50" style="font-size: 50px;line-height: 50px;border-collapse: collapse;"> </td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
这是通过 Outlook 呈现时的图像： [img]http://i.imgur.com/16n8Atf.png[/img]
非常感谢您能提供的任何帮助。 - 谢谢！
【问题讨论】：
-
您是否尝试为
<tr>指定绿色部分/列所在的所需高度？ -
我有。这么幸运。另外，我意识到我链接了错误的图像，正确的图像现在在帖子中。感谢您的帮助！