与其他电子邮件客户端相比，电子邮件设计在 Outlook 中看起来有所不同 [英] email design looking different in outlook in comparison to other email clients
问题描述
我正在处理 html 电子邮件，其中使用 html 和内联样式复制了设计.
I am working on html emails in which I have replicated a design using html and inline styles.
在 Outlook 中，我看到以下设计:
小提琴设计:
附件是 fiddle，因为我已经提到了我所有的 html 和内联样式.在 fiddle 中，与上面的设计 (Outlook) 相比，我得到了不同的设计.
Attached is the fiddle for that where I have mentioned all my html and inline styles. In the fiddle, I am getting the different design in comparison to the design (Outlook) above.
问题陈述:
我想知道我应该在 fiddle 的内联样式中做哪些更改，以便 fiddle 中的设计和上面的屏幕截图(outlook)中的设计看起来相同.
I am wondering what changes I should do in the inline style of the fiddle so that the design in the fiddle and in the screenshot(outlook) above both looks the same.
与小提琴中的设计相比，Outlook 屏幕截图中文本赚钱的步骤下方的空间太多了.我在该部分使用的代码片段是:
The space beneath the text Steps to earn your money is too much in the outlook screenshot in comparison to the design in the fiddle. The snippets of code which I have used in that section are:
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" 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>
推荐答案
快速检查了您的代码，这是我的发现:
Had a quick check of your code and here is what i found:
- 您在第 17 行和第 18 行交换了 td 和 tr(正如上面提到的 Jason)
- 您正在使用填充百分比(第 55 行我已修复).这不是一个好主意，请将其保留在像素中以确保安心.在其他地方也更改为像素.
<html>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="800" class="mobile" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<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" width="100%" 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" width="100%" 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>希望这会有所帮助.
这篇关于与其他电子邮件客户端相比，电子邮件设计在 Outlook 中看起来有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
