2014-12-02 98 views
2

我正在使用VML代码在HTML邮件中显示背景。我在一个表格单元格中有3个表格,它们彼此相邻,但是当我在Outlook中测试我的电子邮件时,表格不再彼此相邻,并且它将我的三个表格垂直对齐,如同每个表格都在线。VML后台代码中断对齐Outlook电子邮件表

这里是我的代码:

<!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" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<table bgcolor="#ffffff" width="600" border="0" cellpadding="0" cellspacing="0" 
    align="center" class="normal" style= 
    "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"> 
         <tr> 
         <td background="http://i.imgur.com/YJOX1PC.png" style="background-image:url('http://i.imgur.com/YJOX1PC.png');" bgcolor="#7bceeb" width="600" height="700" valign="top"> 
    <!--[if gte mso 9]> 
    <v:rect strokecolor='none' style='width:600px;height:700px;'> 
    <v:fill color='#363636' src='http://i.imgur.com/YJOX1PC.png' type='tile'></v:fill> 
    </v:rect> 
    <v:shape id='NameHere' style='position:absolute;width:600px;height:700px;'></v:shape> 
<![endif]--> 
    <div><table width="580" border="0" cellpadding="0" 
      cellspacing="0" align="center" class= 
      "spaced2" > 
           <tr> 
           <td valign="top" style="border:none;"><table class="aligntable" border="0" cellpadding= 
       "0" cellspacing="0" align="left" 
       style= 
       "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr> 
            <td height="20">&nbsp;</td></tr> 
            <tr> 
             <td width="180" align="center"><img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
             TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td> 
            </tr> 
            <tr> 
             <td align="center" valign="top" width="180"><img src= 
         "" 
         border="0" 
         /></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table> 
            <table width="20" align="left" border="0"> 
            <tr> 
             <td></td> 
            </tr> 
            </table> 
            <table class="aligntable2" border="0" cellpadding= 
       "0" cellspacing="0" align="left" 
       style= 
       "display:block; mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr> 
            <tr> 
             <td width="180" align="center"> <img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
              TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;"> TEST</td> 
            </tr> 
            <tr> 
             <td align="center" width="180"><a target="_blank" style= 
         "FONT-SIZE: 16px; COLOR: #0e5fd8; -webkit-text-size-adjust:none; FONT-FAMILY: Verdana, Arial; text-decoration:none; line-height:16px;" 
         href= 
         "http://www.philips.at/c-p/NTRX100_12/?origin=3_at_de_spoilyourself2__ot_dec__hero_img&elqtrack=true"> <img src= 
         "" 
         border="0" /></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table> 
            <table class="aligntable3" border="0" cellpadding= 
       "0" cellspacing="0" align="right" 
       style= 
       "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr> 
            <tr> 
             <td width="180" align="center"><img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
              TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td> 
            </tr> 
            <tr> 
             <td align="center" width="180"> <img src= 
         "" alt= 
        width="50" 
         border="0"/></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table></td> 
           </tr> 
          </table> 
          <!--END TD --> 
           </div> 
    <!--[if gte mso 9]> 
    </v:textbox> 
    </v:rect> 
    <![endif]--> 
</td> 






         </tr> 
         </table> 
</body> 
</html> 

回答

1

嘿,我只是碰到了这个问题,也是想通了修复。

这里发生的事情是在</table>之后和<table>之前,Outlook VML添加了一个Word段落标记,它强制这些表格显示堆叠而不是彼此内联。

</table><table>放之间这一块的条件代码

<!--[if mso]></td><td><![endif]--> 

您的代码应该是这样的

<!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" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<table bgcolor="#ffffff" width="600" border="0" cellpadding="0" cellspacing="0" 
    align="center" class="normal" style= 
    "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"> 
         <tr> 
         <td background="http://i.imgur.com/YJOX1PC.png" style="background-image:url('http://i.imgur.com/YJOX1PC.png');" bgcolor="#7bceeb" width="600" height="700" valign="top"> 
    <!--[if gte mso 9]> 
    <v:rect strokecolor='none' style='width:600px;height:700px;'> 
    <v:fill color='#363636' src='http://i.imgur.com/YJOX1PC.png' type='tile'></v:fill> 
    </v:rect> 
    <v:shape id='NameHere' style='position:absolute;width:600px;height:700px;'></v:shape> 
<![endif]--> 
    <div><table width="580" border="0" cellpadding="0" 
      cellspacing="0" align="center" class= 
      "spaced2" > 
           <tr> 
           <td valign="top" style="border:none;"><table class="aligntable" border="0" cellpadding= 
       "0" cellspacing="0" align="left" 
       style= 
       "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr> 
            <td height="20">&nbsp;</td></tr> 
            <tr> 
             <td width="180" align="center"><img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
             TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td> 
            </tr> 
            <tr> 
             <td align="center" valign="top" width="180"><img src= 
         "" 
         border="0" 
         /></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table> 
            <table width="20" align="left" border="0"> 
            <tr> 
             <td></td> 
            </tr> 
            </table> 
            <!--[if mso]></td><td><![endif]--> 
            <table class="aligntable2" border="0" cellpadding= 
       "0" cellspacing="0" align="left" 
       style= 
       "display:block; mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr> 
            <tr> 
             <td width="180" align="center"> <img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
              TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;"> TEST</td> 
            </tr> 
            <tr> 
             <td align="center" width="180"><a target="_blank" style= 
         "FONT-SIZE: 16px; COLOR: #0e5fd8; -webkit-text-size-adjust:none; FONT-FAMILY: Verdana, Arial; text-decoration:none; line-height:16px;" 
         href= 
         "http://www.philips.at/c-p/NTRX100_12/?origin=3_at_de_spoilyourself2__ot_dec__hero_img&elqtrack=true"> <img src= 
         "" 
         border="0" /></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table> 
            <!--[if mso]></td><td><![endif]--> 
            <table class="aligntable3" border="0" cellpadding= 
       "0" cellspacing="0" align="right" 
       style= 
       "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;"><tr><td height="20"></td></tr> 
            <tr> 
             <td width="180" align="center"><img border="0" src= 
         "" width="180" height="180" /></td> 
            </tr> 
            <tr> 
             <td width="180" valign="middle" align="center" 
        style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #0b5ed7;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 16px;font-weight: normal;padding: 0;margin: 0;text-align: left;line-height: 150%;letter-spacing: 0px;"> 
             <center> 
              TEST 
             </center></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            <tr> 
             <td width="180" height="255" valign="top" 
        align="left" style= 
        "mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse;color: #000000;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;outline: none;line-height: 120%;">TEST </td> 
            </tr> 
            <tr> 
             <td align="center" width="180"> <img src= 
         "" alt= 
        width="50" 
         border="0"/></a></td> 
            </tr> 
            <tr> 
             <td height="20" width="180"></td> 
            </tr> 
            </table></td> 
           </tr> 
          </table> 
          <!--END TD --> 
           </div> 
    <!--[if gte mso 9]> 
    </v:textbox> 
    </v:rect> 
    <![endif]--> 
</td> 






         </tr> 
         </table> 
</body> 
</html>