Question

我在处理HTML（响应）电子邮件的这一部分时遇到了一些困难。我使用的是Zurb Ink框架，但是这部分并没有使用他们的专栏。我需要能够在电子邮件分发客户端中删除它们，因此它被编码为可以通过这种方式为用户编辑。

Outlook 2013的屏幕截图

HTML的片段

＆＃13;

<table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;" class="eleven columns">
                              <tbody>
                                <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                                  <td valign="top" align="left" style="-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; border-collapse: collapse ! important; vertical-align: top; text-align: left; color: rgb(34, 34, 34); font-family: Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0px; padding: 0px 0px 0 10px; border-style: none;" class="left-text-pad" elq-edit="true">

                                    <div style="width: 146px" class="image floatLeft">

                                      <img width="136" vspace="10" height="136" align="left" elq-delete="true" elq-edit="true" class="center" style="box-shadow: 1px 2px 7px -3px #000000; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; position: relative; margin: 0 20px 0 0; border: 2px solid #84bd00;" alt="" src="http://www.futurereadyretail.com/email-templates/responsive-email/image-1.jpg">

                                    </div>


                                    <h3 align="left" style="color: #54585a; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 18px; margin: 0 0 8px; padding: 0;-moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none;" class="headline"><b>Primary headline lorem ipsum dolor sit amet consectetur adipisicing.</b></h3>
                                    <p align="left" style="color: #47484a; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 13px; margin: 0 0 10px; padding: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>


                                    <div class="" elq-edit="true">
                                      <!--[if mso]>
                              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:38px;v-text-anchor:middle;width:160px;" arcsize="25%" stroke="f" fillcolor="#84bd00">
                                <w:anchorlock/>
                                <center>
                              <![endif]-->
                                      <a style="-webkit-text-size-adjust: none; border-radius: 18px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 14px; font-weight: normal; text-transform: uppercase; line-height: 38px; text-align: center; text-decoration: none; width: 163px; background: #84bd00;" target="_blank" href="#" class="button">
                                        <span style="color: #fff">Learn More »</span>
                                      </a>
                                      <!--[if mso]>
                                </center>
                              </v:roundrect>
                            <![endif]-->
                                    </div>

                                  </td>
                                  <td valign="top" align="left" style="word-break: break-word; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" class="expander"></td>
                                </tr>
                              </tbody>
                            </table>

＆＃13;

Answer 1

我＆＃39;已经做了很多通讯的前伤心地说Outlook仍忽略了很多的CSS规则。

我所做的是创建一个1x1透明png，可以下载，并用于在文本和图像之间进行分隔。只需将png插入td，在这种情况下，它就在你的图像旁边并设置png的宽度。

多田！和你的提示，他们的行高和文字大小不同，你需要使用Outlook的CSS。

Answer 2

我能够使用hspace和vspace

获得所需的间距

图像间距 - Outlook（Windows）

2 个答案: