HTML-рассылка - странный межстрочный интервал в iOS

Question

Я разрабатываю шаблон бюллетеня. Хорошо работает на 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> 

P.S. Я вижу, что есть уже похожие должности, но поскольку они не получили никакого интересного ответа, и разметка, которую использует, также делает разницу, я решил опубликовать новые вопросы. Я также хотел бы опубликовать скриншоты из проблем, но это возможно только с репутацией> 10

Answer 1

На ячейке таблицы изображения добавьте это: valign="top". Это заставит контент вверх. В электронной почте это работает последовательно в отличие от css vertical-align.

Кроме того, <h1> и <p> теги лучше избегать для согласованности. <font> теги работают лучше всего в электронной почте.