与其他电子邮件客户端相比，电子邮件设计在外观上看起来不同
Posted
技术标签:
【中文标题】与其他电子邮件客户端相比，电子邮件设计在外观上看起来不同【英文标题】：email design looking different in outlook in comparison to other email clients 【发布时间】：2018-12-02 20:32:22 【问题描述】：我正在处理 html 电子邮件，其中我使用 html 和内联样式复制了设计。
在前景中，我看到了以下设计：
小提琴设计：
附件是fiddle，我在其中提到了我所有的 html 和内联样式。 在fiddle 中，与上面的设计（Outlook）相比，我得到了不同的设计。
问题陈述：
我想知道我应该对小提琴的内联样式进行哪些更改，以便小提琴和上面的屏幕截图（外观）中的设计看起来相同。
与小提琴中的设计相比，outlook 屏幕截图中赚钱的步骤 文本下方的空间太大。我在该部分中使用的代码 sn-ps 是：
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding-left:15%;padding-bottom:25%;">
<tr>
<td>
<h2 style="text-align: left;
padding-left: 19%;
color: #484848;
padding-top: 2.5%;
padding-bottom: 5%;
padding-right: 12%;">steps to earn your money:</h2>
</td>
</tr>
<tr style="text-align:left;color:#484848;font-size:20px;">
<td>
1. click here to open the XYZ app to the posting requests page<br><br>
2. click on availability check request<br><br>
3. say yes, its availabile ot suggest another date it is<br><br>
4. wait the 1 or 24 hour confirmation good<br><br>
5. three days after the booking ends money will be send to your account<br><br>
</td>
</tr>
</table>
【问题讨论】：
您是否尝试打开开发工具 (F12) 并检查电子邮件中的表格以查看正在应用的样式？ Outlook 不支持填充。您需要使用其他方式在元素周围创建间距，例如添加空表行/列或添加height/line-height/width/text-align 样式。
不，也不支持margin。
不，这就是创建电子邮件模板的痛苦。
我检查了更多来源，显然填充确实在 Outlook 中有效，但前提是您遵循最佳实践。请参阅this 帖子。
【参考方案1】：
快速检查了您的代码，这是我发现的：
-
您在第 17 行和第 18 行交换了 td 和 tr（正如上面提到的 Jason）
您正在使用百分比填充（第 55 行我已修复）。这不是一个好主意，保持像素为安心。更改为其他地方的像素。
<html>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="mobile" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td style="padding-left:6%;padding-bottom:5%;font-size:20px;color:#55BEC7;"> hi ABC,</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="font-size:20px;padding-left:5%;">
<tr>
<td style="padding-bottom: 3%;text-align:right;">type:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">what</td>
<td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">how many</td>
<td style="padding-bottom: 3%;padding-left: 10%;">2</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">when:</td>
<td style="padding-bottom: 3%;padding-left: 10%;">Mar 28/18 @ 7:00pm to <br> Mar 30/18 @ 7:00pm</td>
</tr>
<tr>
<td style="padding-bottom: 3%;text-align:right;">who:</td>
<td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding-left:15%;padding-bottom:25%;">
<tr>
<td>
<h2 style="text-align: left;
padding-left: 20px;
color: #484848;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;">steps to earn your money:</h2>
</td>
</tr>
<tr style="text-align:left;color:#484848;font-size:20px;">
<td>
1. click here to open the XYZ app to the posting requests page<br><br>
2. click on availability check request<br><br>
3. say yes, its availabile ot suggest another date it is<br><br>
4. wait the 1 or 24 hour confirmation good<br><br>
5. three days after the booking ends money will be send to your account<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>希望这会有所帮助。
【讨论】：
嗨 Syfer，你能在fiddle 中更新它吗，无论你想让我废弃什么（从你的第一点开始）？ 你在吗？我想知道你是否可以在fiddle 中更新它，无论你想让我废弃什么。 填充将取决于您的设计。将填充从百分比更改为像素。 如果你想让我删除第 17 行和第 18 行，那么你想让我也删除第 7 行和第 8 行吗？ 不，你的设计是什么样的？或者你希望它看起来像什么？只需将百分比值更改为像素，它就应该更改/修复它。像素值不要超过 20px，否则看起来会很奇怪。以上是关于与其他电子邮件客户端相比，电子邮件设计在外观上看起来不同的主要内容，如果未能解决你的问题，请参考以下文章