Question

我正在为我的公司设计一个html电子邮件模板。我使用旧的html表hack将文本定位在背景图像上，看起来像这样

<table>
  <tr>
    <td></td>
    <td rowspan="2">Background image goes here</td>
  </tr>
  <tr>
    <td colspan="2">Text will be displayed over top of the background image</td>
  </tr>
</table>

这在firefox这样的网页浏览器中运行良好，但在chrome和safari中我注意到第一行的空<td>宽度为1px，它打破了设计。

我创建了一个jsFiddle来演示我的电子邮件模板设计中的效果。带有促销，礼品卡和联系人链接的行是效果最明显的地方。您可以看到该行的白色边缘偏移1px。在Firefox中看起来很好，您必须使用Chrome或Safari来查看问题。

这种在电子邮件中使用背景图像的技术是我发现的最兼容的方式。有没有更好的方法？有没有办法让webkit浏览器将<td>呈现为零宽度？

Answer 1

我知道使背景图像适用于所有（相关）浏览器和客户端中的电子邮件的唯一方法是不使用背景图像，特别是没有花哨的黑客，无论技术有多么有趣。

通过切割横幅图像并添加更多单元格，您应该可以在小提琴中进行布局。类似于圆角的工作方式...

Answer 2

您的额外1px会偶尔出现。

您的堆叠表位于彼此之上，而margin：auto可以从一个像素移动。

设置表格的边框以查看它们的位置，您可以管理表格内的边距而不是空白尺寸的td。 http://jsfiddle.net/F9ZjT/1/

/* removed left td and put 20px margin on row links for example. + borders to show tables area */

webkit空td是1px

2 个答案: