Outlook 2010中行之间的额外间距
[英]Extra Spacing Between Rows in Outlook 2010
问题描述
I'm using a table to fake a bulleted list in my HTML email. 
我使用表格伪造HTML电子邮件中的项目符号列表。 It looks great in every client except Outlook 2010, which adds extra white space between each row: 在Outlook 2010之外的每个客户端中，它看起来都很不错，因为Outlook 2010在每行之间添加了额外的空白：
The table cellpadding and cellspacing is set to 0 and I tried explicitly setting the line-height in each table row. 表cellpadding和cellspacing设置为0，我尝试在每个表行中显式设置line-height 。
The code: 编码：
<table width="100%" style="table-layout: fixed; margin-bottom: 21px; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
</table>
1 个解决方案
解决方案1
0 2017-08-21 18:24:57
The problem is the margin-bottom style applied to the parent table . 问题是应用于父table的margin-bottom样式。 Outlook applies that style to the child elements so each td has a bottom margin of 21px . Outlook将这种样式应用于子元素，因此每个td的底边距为21px 。 Remove the bottom margin and use a blank table row to fake a bottom margin instead: 删除底边距，并使用空白表行伪造底边距：
<table width="100%" class="list-table" style="table-layout: fixed; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
</tr>
<tr>
<td width="15" valign="top" style="border-collapse: collapse;">•</td>
<td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
</tr>
<tr>
<td width="100%" height="21" colspan="2" style="border-collapse: collapse;"> </td>
</tr>
</table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.