展望 2013 年 7 月 10 日问题

Question

简而言之，我正在使用精确目标内容生成器，我将代码上传到石蕊中，当然 Outlook 07、10、13 无法识别 100% 的宽度。我已附上屏幕截图以及 sn-p 请协助。

<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="sample" title="" alias="" conversion="false" data-linkto="https://"><img data-assetid="35955" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0edcfa8c-25ad-4b12-8d69-501bde9332ef.jpg" alt="Grocery Discounts" height="45" width="900" style="height:45px;width:900px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></table>

Answer 1

堆栈溢出也不允许我粘贴代码。违规行是 296。您或平台在两列块周围放置了 10 像素的填充（特级初榨和长粒级）。一旦你删除它，它就可以工作了。

片段：

<table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center"><a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35860" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/bf2a32d2-c271-4dd0-88d4-fa1ed13a0668.jpg" alt="$1.00 off California Olive Ranch Olive Oil / $1.00 off Lundberg Family Farms Organic Brown Rice" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; font-size: 13px;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center">
<a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35987" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/3877ff31-7a70-4583-8af9-8cf78ef2032d.jpg" alt="$1.00 off V8 Original Vegetable Juice &amp; Naked Juice Smoothie" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

您可以替换模板上的代码或从评论中的小提琴复制代码。

这是修复的结果。

干杯

Answer 2

Outlook 不太喜欢width="100%"，也不喜欢内联 CSS。因此，将图像上的宽度设置为 width="920" 并在样式中保留其他浏览器将使用的 width:100%;。

以表格为例：

<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="center">
        <a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title=""   data-linkto="https://"><img data-assetid="35864" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/b1be6e76-4a9f-4e7a-89cc-5adf22373d62.jpg" alt="View your current grocery savings" height="auto" width="920" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a>
      </td>
    </tr>
  </tbody>
</table>

---

我应该补充一点，您的主图是 900 像素，比 Outlook 和 Gmail 等某些电子邮件客户端真正支持的宽 100 像素。如果您在使用其他电子邮件客户端时遇到问题，请记住这一点。

您应该在 iPhone 上查看您的电子邮件，因为它一团糟。美国在线也是如此。在每个桌面电子邮件客户端中，折扣奖励横幅都存在对齐问题。

祝你好运。