Question

我正在创建自适应HTML电子邮件。在较大的视口处，我的桌子固定宽度为600px。桌子内部是100％宽度的图像，边框为1px。在某些电子邮件客户端中，右侧边框未显示。我认为这是因为100％宽度加上2px超过600px？我该如何克服这个问题？

我的图片有显示：阻止（如果感兴趣的话）。我尝试了盒子大小调整：border-box但它似乎无法工作......我是将这种风格添加到图像或表格中，还是两者都添加到我的代码中？

感谢您的帮助

标记

Answer 1

我还没有尝试过这个，但其中一个应该适合你。这是一种流畅的技术，可以在任何大小的视口中的任何电子邮件客户端中工作（希望如此）：

<!-- Simple - but will have the image area set as the border color (black) when image is not loaded -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%" bgcolor="#000000" style="padding:1px;">
      <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

<br><br>

<!-- Setting a background color in a nested table to hide border color -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%" bgcolor="#000000" style="padding:1px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td>
            <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

包含100％宽度图像的固定宽度表 - 边框右侧缺失

1 个答案: