Z版面在右侧增加了奇怪的间距Outlook 2010& 13

时间:2016-07-15 22:38:25

标签: html outlook html-email outlook-2010

我在Outlook中遇到一个奇怪的问题,电子邮件的Z版面。基本上它在副本的顶部添加额外的填充,但仅在布局的右侧添加。我尝试在边距和填充之间进行交换,并将其更改为不同的元素(在H6标签和TH标签以及上面的表格上尝试)。一切似乎只是移动了额外的间距,它实际上永远不会消失。

以下是Outlook 2010和2013中的展示方式:https://www.evernote.com/l/AHEyfSHAvAJAb6LFDbEDYrECrb5NxxzEC_8

这是一个Codepen,其中包含完整的HTML。

以下是仅包含Z版面的片段:

<!-- ARTICLE 1
                LAYOUT = COPY > IMAGE
                TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 1 -->
                  <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; text-align: left; vertical-align: top;">
                        <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 40px; text-align: left; width: 225.66667px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">
                                <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                <!-- ^^^ ADD ARTICLE 1 LINK ABOVE -->
                                  <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;">

                                <!-- REPLACE CONTENT BELOW FOR ARTICLE 1 --> 
                                Last Chance to Register!
                              </a></h6>
                                  <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">There’s only one month left to get 50% off registration for the Bluebeam eXtreme Conference. Don't miss this opportunity to connect with customers. <a href="http://partners.bluebeam.com/extremeconference/" target="_blank"
                                      style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Register today >></a></p>
                                  <!-- END OF CONTENT FOR ARTICLE 1 -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                        <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <a href="http://partners.bluebeam.com/extremeconference/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                    <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-1-excon-V3.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;">
                                  </a>
                                  <!-- ^^^ ADD IMAGE 1 URL  -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                  <!-- END ARTICLE 1 -->

                  <!-- ARTICLE 2
                LAYOUT = IMAGE > COPY
                TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 -->
                  <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; text-align: left; vertical-align: top;">
                        <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                    <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-2-steve.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;">
                                  </a>
                                  <!-- ^^^ ADD IMAGE 2 URL  -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                        <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 50px; text-align: left; width: 225.66667px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">
                                <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                <!-- ^^^ ADD ARTICLE 2 LINK ABOVE -->
                                  <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;">

                                <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
                                Steve's Sales Tips
                              </a></h6>
                                  <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Your next opportunity could be closer than you think. Learn how to engage your existing customers with <a href="http://partners.bluebeam.com/2016/07/sellmoretoexistingcustomers/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">these strategies >></a></p>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                  <!-- END ARTICLE 2 -->

                  <!-- ARTICLE 3
                LAYOUT = COPY > IMAGE
                TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 3 -->
                  <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; text-align: left; vertical-align: top;">
                        <th class="small-12 large-5 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px; text-align: left; width: 225.66667px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">
                                <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                <!-- ^^^ ADD ARTICLE 3 LINK ABOVE -->
                                  <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-right-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;">

                                <!-- REPLACE CONTENT BELOW FOR ARTICLE 3 --> 
                                Rally Day Is Heating Up! 
                              </a></h6>
                                  <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are now halfway through our Rally Day US qualifying period. Keep driving sales as we approach the final stretch. Not registered yet? <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Sign up here >> </a></p>
                                  <!-- END OF CONTENT FOR ARTICLE 3 -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                        <th class="small-12 large-7 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; text-align: left; width: 322.33333px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <a href="http://partners.bluebeam.com/rallyday/" target="_blank" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                    <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-3-rally-day.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;">
                                  </a>
                                  <!-- ^^^ ADD IMAGE 1 URL  -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                  <!-- END ARTICLE 3 -->
                  <!-- ARTICLE 2
                LAYOUT = IMAGE > COPY
                TO DUPLICATE SELECT FROM ROW BELOW TO END ARTICLE 2 -->
                  <table class="row row-article" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;">
                    <tbody>
                      <tr style="padding: 0; text-align: left; vertical-align: top;">
                        <th class="small-12 large-7 columns first" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; text-align: left; width: 322.33333px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                    <img src="https://downloads.bluebeam.com/images/2016/VARiety/16-07/article-4-cool-down.jpg" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;">
                                  </a>
                                  <!-- ^^^ ADD IMAGE 2 URL  -->
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                        <th class="small-12 large-5 columns last" style="Margin: 0 auto; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0 auto; padding: 0; padding-bottom: 40px; padding-left: 8px; padding-right: 16px; padding-top: 20px; text-align: left; width: 225.66667px;">
                          <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
                            <tbody>
                              <tr style="padding: 0; text-align: left; vertical-align: top;">
                                <th style="Margin: 0; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; padding: 0; text-align: left;">
                                  <h6 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">
                                <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">
                                <!-- ^^^ ADD ARTICLE 2 LINK ABOVE -->
                                  <img class="article-arrow" width="25" height="20" src="http://www.bluebeam.com/us/email/variety/html/images/arrow-left-blue.png" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: inline-block; max-width: 100%; outline: none; text-decoration: none; width: auto;">

                                <!-- REPLACE CONTENT BELOW FOR ARTICLE 2 --> 
                                Cool Down With Bluebeam This Summer 
                              </a></h6>
                                  <p style="Margin: 0; Margin-bottom: 10px; color: #C7C7C7; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Host a Bluebeam-themed Happy Hour, complete with a Revu presentation. We’ll send the koozies, you’ll bring the customers! Contact your <a href="mailto:partners@bluebeam.com" style="Margin: 0; color: #0083db; font-family: Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">Partner Relations Specialist</a>                                        to learn more.</p>
                                </th>
                              </tr>
                            </tbody>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                  <!-- END ARTICLE 2 -->

如果您发现可能导致此问题的任何内容,请与我们联系。

1 个答案:

答案 0 :(得分:0)

由于最近版本的Windows Outlook使用Microsoft Word来呈现电子邮件,因此通常需要强制执行Web浏览器刚刚发现的强制样式。

基于您上面报告的代码和问题的两条建议: - 将内联样式放在尽可能低的级别(不要依赖级联) - 使用已删除的HTML属性,例如valignalign

专门针对您的电子邮件:

将垂直对齐CSS放在<td><th>而不是<tr>中:

<tr style="vertical-align: top;">
    <th style=""...>

更改为

<tr style="">
    <th style="vertical-align: top;"...>

就此而言......使用旧的和已弃用的valign=""属性将Outlook强制转换为垂直对齐:

<th valign="top" style="vertical-align: top;"...>

确保电子邮件每一行的填充符合。简化版可以从中得到:

  <th class="small-12 large-7 columns first" style="padding: 0; padding-bottom: 40px; padding-left: 16px; padding-right: 8px; padding-top: 45px;

到此:

  <th class="small-12 large-7 columns first" style="padding: 45px 8px 40px 16px;">