【问题标题】:Email signature gets messed up on reply电子邮件签名在回复时搞砸了
【发布时间】:2017-02-24 16:40:12
【问题描述】:

我的电子邮件签名有问题。在 Outlook 中回复时会出错。

发生了什么:当我将带有签名的电子邮件从 Outlook 2016(在 Mac 上)发送到 Outlook 2007(在 Windows 上)时,它看起来不错。回复那封电子邮件时,它看起来仍然不错。回复该电子邮件时,签名会变得混乱。截图:enter image description here

我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title></title>

<style type="text/css">
/* Client-specific Styles */

#outlook a {
    padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
    width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,     .ExternalClass td, .ExternalClass div {
    line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {
    margin: 0;
    padding: 0;
    width: 100% !important;
    line-height: 100% !important;
}
img {
    outline: none;
    text-decoration: none;
    border: none;
    -ms-interpolation-mode: bicubic;
}
a img {
    border: none;
}
.image_fix {
    display: block;
}
p {
    margin: 0px 0px !important;
}
table td {
    border-collapse: collapse;
}
table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

 /*##############################################*/
 /*IPHONE STYLES*/
 /*##############################################*/
@media only screen and (max-width: 480px) {
    table {
    position: relative;
}

table[class="fluid-table"], td[class="fluid-cell"]{
    width: 100% !important;
}

}
</style>

</head>


<body>
<div class="block"> 

    <!-- Start of name, function title and logo -->

    <table border="0" cellpadding="0" cellspacing="0" class="fluid-table">
        <tbody>

          <tr>
            <td style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                <span style="text-align: left; color: #9C1C27;font-size: 15px; font-weight: bold">Voornaam en Achternaam</span><br/>
                <span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/>
        </td>
      </tr>
        <tr>
            <td>
                <a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;"  alt="De Leeuw Hides logo" title="De Leeuw Hides logo" /></a>
            </td>
        </tr>
    </tbody>
</table>
<!-- End of name, function and logo -->

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td><table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
          <tr>

            <!-- Start of first column --> 

            <td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>

                  <tr>
                    <td width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                        <strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
                        Lindenhoutseweg 69<br/>
                        6545 AH Nijmegen <br/>
                        The Netherlands
                    </td>   
                  </tr>

                </tbody>
              </table>

              <!-- End of first column --> 


              <!-- Start of second column -->

              <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>

                  <tr>
                    <td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                        <strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
                        Industrieweg 2a<br/>
                        7102 DZ Winterswijk<br/>
                        The Netherlands
                    </td>
                  </tr>
                </tbody>
              </table>

              <!-- End of second column --> 



              <!-- Start of third column -->

              <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>
                  <tr>
                     <td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                            <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/>
                            <span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
                            <a style="text-decoration:none; color:#9C1C27;" href="mailto:sales@deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales@deleeuwhides.nl</span></a><br/>
                            <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
                        </td>
                  </tr>
                </tbody>
              </table>

              <!-- End of third column -->
            </td>
          </tr>
        </table>


        <!-- Start of branding identity elements -->
        <table cellpadding="0" cellspacing="0" border="0" width="100%"  class="fluid-table">
           <tr>
                <td style="height:3px; width:100%; background-color:#B5987F;">
                </td>
            </tr>
        </table>

        <table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
           <tr>
                <td style="height:2px; width:100%; background-color:#fff;">
                </td>
            </tr>
        </table>


            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
                    <tr>
                        <td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
                        </td>
                   </tr>
            </table>
        <!-- End of branding identity elements-->

      </td>
    </tr>
  </table>

</div>
</body>
</html>

为什么会发生这种情况,我该如何解决?

【问题讨论】:

    标签: html css email outlook signature


    【解决方案1】:

    我将您的消息从http://putsmail.com 发送到我的 Outlook 地址,回复了我的 gmail,然后回复了我的 Outlook,得到了这个:

    当我回复 gmail 时,它看起来很好。

    我的建议是将valign="top" 添加到相关表格中的 tr 和 td 单元格中。这将强制表格单元格对齐。

    `

            <!-- Start of first column --> 
    
            <td valign="top">
              <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>
    
                  <tr valign="top">
                    <td valign="top" width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                        <strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
                        Lindenhoutseweg 69<br/>
                        6545 AH Nijmegen <br/>
                        The Netherlands
                    </td>   
                  </tr>
    
                </tbody>
              </table>
    
              <!-- End of first column --> 
    
    
              <!-- Start of second column -->
    
              <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>
    
                  <tr valign="top">
                    <td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                        <strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
                        Industrieweg 2a<br/>
                        7102 DZ Winterswijk<br/>
                        The Netherlands
                    </td>
                  </tr>
                </tbody>
              </table>
    
              <!-- End of second column --> 
    
    
    
              <!-- Start of third column -->
    
              <table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
                <tbody>
                  <tr valign="top">
                     <td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
                            <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/>
                            <span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
                            <a style="text-decoration:none; color:#9C1C27;" href="mailto:sales@deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales@deleeuwhides.nl</span></a><br/>
                            <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
                        </td>
                  </tr>
                </tbody>
              </table>
    
              <!-- End of third column -->
            </td>
          </tr>
        </table>
    
    
        <!-- Start of branding identity elements -->
        <table cellpadding="0" cellspacing="0" border="0" width="100%"  class="fluid-table">
           <tr>
                <td style="height:3px; width:100%; background-color:#B5987F;">
                </td>
            </tr>
        </table>
    
        <table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
           <tr>
                <td style="height:2px; width:100%; background-color:#fff;">
                </td>
            </tr>
        </table>
    
    
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
                    <tr>
                        <td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
                        </td>
                   </tr>
            </table>
        <!-- End of branding identity elements-->
    
      </td>
    </tr>
    

    `

    【讨论】:

      【解决方案2】:

      解决了!我首先删除了所有有助于将列彼此相邻的对齐属性。然后,我删除了所有表格并制作了一个“包装”表格,其中一个表格嵌套在包含所有内容的包装表格中。希望我能清楚地描述这一点,大声笑。无论如何,这解决了我所有的问题!

      这是我的代码,供有兴趣或遇到与我相同问题的人使用:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      
      <head>
      
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <title></title>
      
      <style type="text/css">
      /* Client-specific Styles */
      
      #outlook a {
          padding: 0;
      } /* Force Outlook to provide a "view in browser" menu link. */
      body {
          width: 100% !important;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          margin: 0;
          padding: 0;
      }
      /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
      .ExternalClass {
          width: 100%;
      } /* Force Hotmail to display emails at full width */
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
          line-height: 100%;
      } /* Force Hotmail to display normal line spacing. */
      #backgroundTable {
          margin: 0;
          padding: 0;
          width: 100% !important;
          line-height: 100% !important;
      }
      img {
          outline: none;
          text-decoration: none;
          border: none;
          -ms-interpolation-mode: bicubic;
      }
      a img {
          border: none;
      }
      .image_fix {
          display: block;
      }
      p {
          margin: 0px 0px !important;
      }
      
      table td{
          border-collapse: collapse;
          border-spacing:0;
          mso-table-lspace: 0pt;
          mso-table-rspace: 0pt;
      }
      
      /*##############################################*/
       /*IPHONE STYLES*/
       /*##############################################*/
      @media only screen and (max-width: 480px) {
      table {
          position: relative;
      }
      
      table[class="fluid-table"], td[class="fluid-cell"]{
          width: 100% !important;
      }
      
      }
      </style>
      
      </head>
      
      
      <body>
      <div class="block"> 
      
          <!-- Start of wrapper table -->
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
              <tr>
                <td>
                  <table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
      
          <!-- Start of name, function title and logo -->
                <tr>
                  <td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;">
                          <strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/>
                          <em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/>
                  </td>
                </tr>
      
                  <tr>
                      <td style="padding-bottom:5px;">
                          <a href="http://www.deleeuwhides.com/"><img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;"  alt="De Leeuw Hides logo" title="De Leeuw Hides logo" /></a>
                      </td>
                  </tr>   
          <!-- End of name, function and logo -->
      
      
                      <!-- Contact info and Start of first column --> 
                            <tr>
                              <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px;  font-family: Open Sans, Arial, Verdana, sans-serif;">
                                  <strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
                                  Lindenhoutseweg 69<br/>
                                  6545 AH Nijmegen <br/>
                                  The Netherlands
                              </td>   
                        <!-- End of first column --> 
      
      
                        <!-- Start of second column -->
                              <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px;  font-family: Open Sans, Arial, Verdana, sans-serif;">
                              <strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
                                  Industrieweg 2a<br/>
                                  7102 DZ Winterswijk<br/>
                                  The Netherlands
                              </td>
                          <!-- End of second column --> 
      
                        <!-- Start of third column -->
                               <td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
                                      <a href="tel:0031-024-3775233" style="color:#B5987F;">T:0031-024-3775233</a> <br/>
                                      <span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
                                      <a style="text-decoration:none; color:#9C1C27;" href="mailto:sales@deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales@deleeuwhides.nl</span></a><br/>
                                      <a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
                                  </td>
                            </tr>
                          </table>
                 <!-- End of third column and contact info -->
      
      
                  <!-- Start of branding identity elements -->
      
                     <tr>
                          <td bgcolor="#B5987F" style="height:3px; width:100%;"></td>
                      </tr>
      
                     <tr>
                          <td bgcolor="#ffffff" style="height:3px; width:100%;"></td>
                      </tr>
                              <tr>
                                  <td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;">
                                      <center>
                                          <img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" />
                                      </center>
                                  </td>
                             </tr>
      
                  <!--    End of branding identity elements -->
      
                      </td>
                  </tr>
              </table>
              <!-- end of wrapper table -->
      
      </div>
      </body>
      </html>
      

      【讨论】:

        【解决方案3】:

        嗯,正如他们所说:“电子邮件很难”。

        一般来说,在处理电子邮件时内联 CSS 样式是一种很好的做法。我使用来自 Litmus 的 this tool,他们也有 a pretty good article 关于开发适合电子邮件(特别是 gmail)的 HTML 内容的陷阱。

        【讨论】:

        • 感谢您的两个回答!是的,电子邮件真的非常非常难。然而,问题不在于 Gmail。我对此进行了测试,据我所知它正在工作。问题是 Outlook,我特别认为是 Outlook 2007。太奇怪了,问题只有在第三次回复后才会出现。我一定会尝试 valign 顶部的东西并报告。
        • 我知道这不是 gmail。我只是想报告我的所作所为。 Outlook 因这种行为而臭名昭著,我想看看它是否修改了代码。我缺少用于测试的 Outlook Mac,这就是我使用 putsmail 发送的原因,它根本不编辑代码。
        • 再次感谢。使用 valign=top 对其进行了测试,但没有任何区别。然后我用剥离了所有非内联 css 代码对其进行了测试,但这也不起作用。也很奇怪的是,最新的回复没有显示这个问题。它总是在那之前的那些。我也像您一样使用 Gmail 对其进行了测试,并得到了相同的结果。这似乎确实是 Outlook 2007 的问题。我无法理解为什么它只发生在回复中。当你发送它时看起来很好,然后当你回复原始电子邮件时,签名就会变得混乱。
        • 在进一步检查后,Outlook 2007 似乎将签名中的所有元素都视为可以移动的图像。有没有办法让 Outlook 2007 不这样做?
        • 所以我在进步!我注意到我的很多问题都是由 align="left" 引起的。我尽可能多地删除它们,甚至最终删除了一列。他们现在紧挨着。我还解决了棕色线和红色条之间有大量空间的问题。解决方案是制作这张桌子。
        猜你喜欢
        • 2011-01-15
        • 1970-01-01
        • 2018-08-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-08-17
        • 2010-09-05
        相关资源
        最近更新 更多