与其他电子邮件客户端相比，电子邮件设计在Outlook中看起 [英] email design looking different in outlook in comparison to other email clients

问题描述

我正在研究html电子邮件，其中我使用html和内联样式复制了一个设计。

在展望中，我看到以下设计：

设计小提琴：

随附的是小提琴为此，我提到了我所有的html和内联样式。 在小提琴中，与上面的设计（Outlook）相比，我得到了不同的设计。

问题陈述：

我想知道我应该在小提琴的内联样式中做些什么改变，这样小提琴中的设计和上面的截图（outlook）看起来都是一样的。

与小提琴中的设计相比，文字获取金钱的步骤下面的空间太多了。我在该部分中使用的代码片段是：

 < tr> 
< td> 
< table cellpadding =0cellspacing =0border =0width =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％;>步骤来赚钱：< / h2> 
< / td> 
< / tr> 
< tr style =text-align：left; color：＃484848; font-size：20px;> 
< td> 
 1.点击此处打开XYZ应用程序到发布请求页面< br>< br> 
 2.点击可用性检查请求< br>< br> 
 3.说是，它的可用性表明它是另一个日期< br>< br> 
 4.等待1或24小时确认确认< br>< br> 
 5.预订结束后三天，钱将被发送到您的帐户< br>< br> 
< / td> 
< / tr> 
< / table> 
  

解决方案

快速检查一下你的代码，这是什么我找到了：

1. 你在第17和18行交换了td和tr（就像上面提到的杰森一样）


2. 您使用填充作为百分比（第55行固定）。它不是一个好主意，保持像素安心。也可以更改为其他地方的像素。

 < HTML><身体GT; < table cellpadding =0cellspacing =0border =0width =800class =mobilealign =center> < TR> < TD> < table cellpadding =0cellspacing =0border =0width =100％> < TR> < td style =padding-left：6％; padding-bottom：5％; font-size：20px; color：＃55BEC7;>在ABC，< / td> < / TR> < /表>< / TD> < / TR> < TR> < TD> < table cellpadding =0cellspacing =0border =0width =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％;>可用性检查请求< / td> < / TR> < TR> < td style =padding-bottom：3％; text-align：right;>估计总数：< / 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;>多少< / 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:00 pm to< br> Mar 30/18 @ 7:00 pm< /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> < /表> < / TD> < / TR> < TR> < TD> < table cellpadding =0cellspacing =0border =0width =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;>步骤来赚钱： < / H2> < / TD> < / TR> < tr style =text-align：left; color：＃484848; font-size：20px;> < TD> 1.单击此处将XYZ应用程序打开到发布请求页面< br>< br> 2.点击可用性检查请求< br>< br> 3.说是，它的可用性表明它是另一个日期< br>< br> 4.等待1或24小时确认好< br>< br> 5.预订结束后三天，钱将被发送到您的帐户< br>< br> < / TD> < / TR> < /表> < / TD> < / TR> < / table>< / body>< / html>  

<希望这会有所帮助。

I am working on html emails in which I have replicated a design using html and inline styles.

In the outlook, I am seeing the following design:

Design in the fiddle:

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.

Problem Statement:

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.

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:

1. You had the td and tr swapped at line 17 and 18 (just as Jason above mentioned)
2. You are using padding as percentage (line 55 i fixed). Its not a good idea, keep it at pixels for peace of mind. Change to pixels in other places as well.

<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>

Hope this helps.

这篇关于与其他电子邮件客户端相比，电子邮件设计在Outlook中看起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！