는 HTML 뉴스 레터 - 아이폰 OS

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. 이미 비슷한 게시물이 있다는 것을 알았지 만, 흥미로운 답변을받지 못했고 마크 업이 사용하는 경우에도 새로운 질문을 게시하기로 결정한 차이가 있습니다. 나는 또한 문제의 스크린 샷을 게시하고 싶지만 명성으로 만 가능합니다.> 10

Answer 1

이미지의 표 셀에 valign="top"을 추가하십시오. 그것은 내용을 맨 위에 강제합니다. 전자 우편에서 이것은 css vertical-align과 달리 일관되게 작동합니다.

또한, <h1> 및 <p> 태그 일관성을 피하는 것이 가장 적합합니다. <font> 태그가 전자 메일에서 가장 잘 작동합니다.