2015-07-20 85 views
0

我正在寫郵件頁腳(簽名),到處都能正常工作,除了Outlook客戶端!我的桌子壞了,我不知道爲什麼,我在互聯網上嘗試過很多技巧,但沒有運氣,請任何人幫忙?下面是例子代碼的我:我有哪裏表嵌套在表中的部分問題:HTML電子郵件 - 問題與表 - Outlook 2007/2010/2013

<!DOCTYPE html > 
    <html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
      <title>Mail footer</title> 
      <style type="text/css"> 
       body{margin: 0; font-size: 13px; font-family: Calibri, sans-serif;} 
       table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 
       table td { border-collapse:collapse; } 

       @media only screen and (max-width: 700px) { 
        body,table,td,p,a,li,blockquote { 
        -webkit-text-size-adjust:none !important; 

        } 
        table {width: 100% !important;} 

        } 

       @media only screen and (max-width: 700px) { 

        .footer table{width: 25% !important;} 
        } 

       @media only screen and (max-width: 700px) { 

        .logo { border: none !important; } 
        } 

      </style> 
     </head> 
     <body> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td valign="top" class="logo"> 
         <table cellpadding="0" cellspacing="0" align="left" width="550"> 
          <tr> 
           <td valign="top"> 
            <div style="font-size: 15px; font-weight: 600;"><b>Xxxxx xxxx</b></br></div> 
            <div style="font-size: 13px;"> 
             <font color="#008AC9">Managing Director</font></br></br> 
            </div> 
           </td> 
          </tr> 
          <!-- white space --> 
          <!--tr><td style="font-size: 0; line-height: 0;" height="15">&nbsp;</td></tr--> 
          <tr> 
           <td valign="top"> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="24%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
             <tr> 
              <td class="logo" valign="top" style="font-size: 0; line-height: 0; padding: 1px 8px 0 8px; border-right: 1px solid #485465;" height="55" align="left"> 
               <a href="#"><img src="Logo" alt="logo" height="40" width="90"></a> 
              </td> 
             </tr> 
            </table> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="7%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
             <tr> 
              <td valign="top"> 
               &nbsp; 
              </td> 
             </tr> 
            </table> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
             <tr> 
              <td valign="top"> 
              <div style="font-size: 12px; color: #666666;"> 
               Xxxxxx xxxxx<br /> 
               Xxxxxxx x x xxxx<br /> 
               Xxxxxxx xxxxxxxxx<br /> 
               Xxxxxx 
              </div> 
              </td> 
             </tr> 
            </table> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
             <tr> 
               <td valign="top"> 
               <div style="font-size: 12px; color: #666666;"> 
                <a href="" style="color:#666666; text-decoration:none;"><span style="color:#666666; text-decoration:none;">Direct: XXXXXXXX<br /></span></a> 
                <a href="" style="color:#666666; text-decoration:none;">Office: XXXXXXXX<br /></span></a> 
                <a href="mailto:[email protected]" style="color:#666666; text-decoration:none;">[email protected]<br /></span></a> 
                www.XXXXXX.com 
               </div> 
               </td> 
             </tr> 

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


          <!-- LOGAAAAAAAAAAAAAAA ############################ --> 
          <tr><td valign="top" style="font-size: 0; line-height: 0;" height="3" >&nbsp;</td></tr> 

          <tr> 
           <td valign="top"> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="63.5%"> 
             <tr> 
              <td valign="top" class="logo" style="line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left"> 
               &nbsp;           
              </td> 
             </tr> 
            </table> 
            <table class="footer" border="0" cellpadding="0" cellspacing="0" align="left" width="30%"> 
             <tr> 
              <td valign="top" class="logo" style=" padding: 1px 0px 0 8px;" height="15px" align="left"> 
               <table border="0" cellpadding="0" cellspacing="0" align="left" width="20%"> 
                <tr> 
                 <td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image"> 
                  <a href="#"><img src="Test" alt="Facebook" height="8px" width="8px"></a> 
                 </td> 
                </tr> 
               </table> 
               <table border="0" cellpadding="0" cellspacing="0" align="left" width="20%"> 
                <tr> 
                 <td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image"> 
                  <a href="#"><img src="Test2" alt="Linkedin" height="8px" width="8px"></a> 
                 </td> 
                </tr> 
               </table> 
               <table border="0" cellpadding="0" cellspacing="0" align="left" width="20%"> 
                <tr> 
                 <td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image"> 
                 </td> 
                  <a href="#"><img src="Test3" alt="Twitter" height="8px" width="8px"></a> 
                </tr> 
               </table> 
               <table border="0" cellpadding="0" cellspacing="0" align="left" width="20%"> 
                <tr> 
                 <td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image"> 
                  <a href="#"><img src="Test4" alt="Google Plus" height="8px" width="8px"></a> 
                 </td> 
                </tr> 
               </table> 
              </td> 
             </tr> 
            </table> 
            <table border="0" cellpadding="0" cellspacing="0" align="left" width="6.5%"> 
             <tr> 
              <td valign="top" class="logo" style=" line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left"> 
               &nbsp; 
              </td> 
             </tr> 
            </table> 
           </td> 

          </tr> 

          <tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" width="550">&nbsp;</td></tr> 
          <tr><td valign="top" style="border-bottom: dotted 1px #bbbbbb; font-size: 0; line-height: 0;" height="1">&nbsp;</td></tr> 
          <tr style="text-align: justify;"> 
           <td valign="top"> 
            <div style="font-size: 10px; color: #909090;"> 
            </br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.         </div> 
           </td> 
          </tr> 
          <tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" >&nbsp;</td></tr> 

         </table> 
        </td> 
       </tr> 
      </table> 
     </body> 
    </html> 
+1

outlook使用word的html渲染代理,您應該考慮相當於Internet Explorer版本0.000000000001cocktail餐巾。這是完全廢話。 –

+0

添加到表格style =「border-collapse:collapse;」 –

回答

0

我猜的問題是,表拉閘堆疊到下一行。這是因爲Outlook添加了對齊表格之間的間距。通常最好是在每個表格之間留出10-20像素寬度的間隔以允許Outlook隨機添加寬度。

您的其他選擇,如果使用間隙不是一種選擇是使用TD s而不是表。這將消除某些客戶端的響應(特別是Android native client)。

如果您需要保留響應能力,通過用TH標記替換TD,它將消除android客戶端中的問題,並允許您在移動設備上創建列堆棧。

+0

Yup Outlook爲對齊的表格添加了邊距。 Outlook很棒! (諷刺地說) – ja408