-1

我正在开发一个时事通讯模板。在 Outlook2007 上运行良好,但在 iPhone 上我仍然有一些问题。使用以下代码,我尝试创建一个包含图像和文本块(由标题和文本组成)的预告块。在我的意图中,文本块不应高于它旁边的图像。在 iOS (Apple Mail) 中,标题之间添加了一个恼人的空格。无论如何,关于如何摆脱它的想法?

<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<img src='testImage.jpg' alt='' />
</td>
<td width="298" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<a href="http://www.lyra.net/fabio" target="blank" style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</a>
</h1>
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; overflow: hidden; margin: 4px 0px 0px;">
WeeeeFFFFr? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td height="52" width="0" style="color: #6f6f6f; border: #6f6f6f;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

PS 我看到已经有类似的帖子,但由于他们没有收到任何有趣的答案,而且使用的标记也有所不同,我决定发布一个新问题。我也很想发布问题的截图,但只有声誉> 10才有可能

4

1 回答 1

0

在图像的表格单元格中,添加以下内容:valign="top"。它会将内容强制置顶。在电子邮件中,这与 css 垂直对齐不同。

此外,<h1>最好<p>避免使用标签以保持一致性。<font>标签在电子邮件中效果最好。

于 2013-06-18T15:17:55.707 回答