[英]E-mail newsletters: how do I keep line height for headers consistent?
我一直在瀏覽有關電子郵件通訊設計和編碼的行賄補丁。 一個問題不斷出現:不同電子郵件客戶端之間標題的行高不一致。
一組標題提供了大量空間,其中包括Gmail和iPhone:
另一組,主要是Outlook,以較小的回旋余地顯示標題:
我的代碼如下:
<table width="540" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-top-orange.gif" width="270" height="7" style="display:block;"></td>
<td rowspan="3" width="270" height="199"><img editable width="270" height="199" style="display:block;"></td>
</tr>
<tr bgcolor="#f68b1f" >
<td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
<td width="15" height="185" bgcolor="#f68b1f"></td>
<td width="223" height="185" bgcolor="#f68b1f" align="left" valign="top"><a name="item2" style="text-decoration: none;"><h2 style="font-family: Arial, Verdana, sans-serif; font-size: 15px; color: white !important; color:white;"><singleline label="Title" repeatertitle="true" style="color: white;">Lorem ipsum</singleline></h2></a><multiline><p style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: white;">Lorem ipsum dolor sit amet</p></multiline></td>
<td width="15" height="185" bgcolor="#f68b1f"></td>
<td width="7" height="185"><img src="img/shading-right-small.gif" width="7" height="185" style="display: block;"></td>
</tr>
<tr>
<td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-bottom-orange.gif" width="270" height="7" style="display:block;"></td>
</tr>
newletter應用程序根據需要填寫文本。
我該如何編寫代碼,以使所有(或大多數)客戶端都能像在Gmail中一樣呈現標題? 我已經嘗試了很多方法,例如為標題添加另一個嵌套表,為其提供橙色頂部邊框等。這些修復程序還影響Gmail的呈現,這不是我想要的。
如您所見,您不想依賴HTML電子郵件中的line-height
,因為客戶端之間的支持非常差且不一致。 不幸的是,要解決這個問題的方法就是重構代碼,以使某些tables
嵌套。
在這里查看這個小提琴 ,基本上我只是在第二個tr
的td
內嵌套了另一個table
。 該表有一個完整的td
,唯一要做的就是將其設置為特定的高度,並在標題上方創建一些填充:
<tr bgcolor="#f68b1f" >
<td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
<td colspan="3">
<table> <!--the new nested table-->
<tr>
<td bgcolor="#f68b1f" colspan="3" height="15"></td>
</tr>
不幸的是,在HTML電子郵件世界中,您將不得不依靠這些基於表的布局hack,而不是像line-height
這樣的實際CSS。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.