电子邮件HTML：Outlook添加额外像素

Question

Outlook正在我的HTML电子邮件的右侧添加一个额外的像素。有关如何解决此问题的任何想法？从我在网上看到的border-collapse: collapse !important;应该修复它但不是。 Outlook HTML Tricks/Tips

<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td width="15" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left"> </td>
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">

<table class="container" width="580" align="center" cellpadding="0" cellspacing="0" style="border-spacing: 0; border-collapse: collapse !important; vertical-align: top; text-align: inherit; min-width:580px; width: 580px; background: #fff; margin: 0 auto; padding: 0; border-left: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;" bgcolor="#ffffff">

Answer 1

尝试一下。

<style>
    table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
    table td {border-collapse: collapse;}
</style>

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="15" valign="top" style="color:#222222;font-family: 'Helvetica', 'Arial', sans-serif;font-size: 14px;"></td>
        <td style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif;font-size: 14px;">
            <table class="container" width="580" border="1" align="center" bgcolor="#ffffff" width="580" cellpadding="0" cellspacing="0" style="min-width:580px;border-color:#d2d2d2;border-top:none;">
                <tr><td></td></tr>
            </table>
        </td>
    </tr>
</table>

Answer 2

在图片代码上设置style="margin: 0; border: 0; padding: 0; display: block;"。缺少display:block;可能是原因。否则可能是因为您的图像设置为与表/ td相同的宽度，尝试将其减小2px，因为1px边框可能会将其推得更宽。

除此之外，你还有很多不必要的代码。试试这个：

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #d2d2d2;">
  <tr>
    <td>
      <img alt="" src="http://placehold.it/600x100" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
  <tr>
    <td align="center" style="font-family: 'Helvetica', 'Arial', sans-serif; font-size:20px; padding:5%;">
      Text here<br>
      ...
    </td>
  </tr>
</table>

这是流动的，所以它会调整大小到容器或窗口/屏幕（无论小什么）。在旁注中，使用你所拥有的所有连字符代码，我猜你想控制流体布局中大型文本上的断点。尝试在单词之间使用 。类似的东西：

This sentence will have no orphan words and will split into nice blocks of text.

在那里，我强迫“好”之间的分页。和＆＃39;阻止＆＃39;，如果宽度导致它溢出。

Answer 3

尝试空<td> font-size:0; line-height: 0;并尝试line-height: 19px; font-size: 14px;必须。