0

我正在为我的公司设计一个 html 电子邮件模板。我正在使用看起来像这样的旧 html table 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>为零宽度？

4

2 回答 2

1

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

您应该能够通过分割横幅图像并添加更多单元格来制作小提琴中的布局。类似于你制作圆角的方式......

于 2013-06-10T22:34:18.890 回答
0

Your extra 1px shows once in a while.

Your stacking tables on top of each other, and margin:auto can move from a pixel.

Set borders to your tables to see where they stand, you may manage margin inside tables instead empty sized td . http://jsfiddle.net/F9ZjT/1/ 

/* removed left td and put 20px margin on row links for example. + borders to show tables area */
于 2013-06-10T23:22:40.163 回答