Question

我的HTML中有2个左对齐表（目的是回复电子邮件HTML）。 Outlook正在堆叠它们只是为了我无法删除的1个可怜的像素。 2张图像完全相同（出于测试原因）。但Outlook出于任何未知原因在第二个表的左边界插入1个像素。

我放弃了！任何人都可以想出如何删除它，以便2个表适合父表，因此不会从上到下堆叠？

Outlook sample

HTML代码在这里（我在Outlook中附加收到的电子邮件中的图像，如在浏览器中表示是否适合）： https://jsfiddle.net/pzamxm9c/#&togetherjs=4x0GFwld1q

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
table {border-collapse: collapse; margin:0;padding:0;mso-table-lspace:0pt; mso-table-rspace:0pt;}
</style>
</head>

<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
 <tr>
 <td align="left">
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
 </td>
 </tr>
 </table>
</body>
</html>

Answer 1

您可以使用Outlook“ghost列”来包含并排表：

<!--[if (gte mso 9)|(IE)]>
    </td><td align="left">
<![endif]-->

这是针对除Outlook.com之外的所有Outlook。

Answer 2

如果与<table>并排，则有95％的时间会在<table>的宽度上额外增加1-2个像素。最好的解决方案是将它们包装在<td>中。

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
body {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

@media (max-width: 600px) {
*[class].w320 {
    width: 320px !important;
}
*[class].break {
    display: block !important;
}
*[class].break img {
    width: 100% !important;
    height: auto !important
}
}
</style>
</head>
<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" class="w320" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
  <tr>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0" /></td>
        </tr>
      </table>
    </td>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0"/></td>
        </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

Answer 3

＆lt; pre＆gt;＆lt; code＆gt;＆lt;！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 DTD“＆GT; ＆lt; html xmlns =“http://www.w3.org/1999/xhtml”＆gt; ＆LT; HEAD＆GT; ＆lt; meta http-equiv =“Content-Type”content =“text / html; charset = iso-8859-1”/＆gt; ＆lt; title＆gt; Documentosintítulo＆lt; / title＆gt; ＆lt; style type =“text / css”＆gt; 表{ 边界崩溃：崩溃; 保证金：0; 填充：0; mso-table-lspace：0pt; mso-table-rspace：0pt; } ＆LT; /风格＆GT; ＆LT; /头＆GT; ＆lt; body style =“font-size：0px; line-height：0px;”＆gt; ＆lt; table border =“0”cellspacing =“0”cellpadding =“0”bgcolor =“＃FFFFFF”＆gt; ＆LT; TR＆GT; ＆lt; td align =“left”＆gt; ＆lt; table align =“left”width =“290”border =“0”cellpadding =“0”cellspacing =“0”＆gt; ＆LT; TR＆GT; ＆lt; td align =“left”bgcolor =“＃FFFFFF”style =“font-size：1; height：1px; mso-table-lspace：0; mso-table-rspace：0;”＆gt;＆lt; p style = “MSO的表lspace：0; MSO的表rspace：0;字体大小：0像素;线高度：0像素;” ＆GT; ＆lt; img align =“left”src =“http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png”alt =“Bote：47 millones”width =“290”style =“border：0px none; “ border =“0”/＆gt; ＆LT; / P＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆lt;！ - [if gte mso 9]＆gt; ＆LT; / TD＆GT; 百分比抑制率ENDIF] - GT！; ＆lt;！ - [if gte mso 9]＆gt; ＆lt; td align =“left”＆gt; 百分比抑制率ENDIF] - GT！; ＆lt; table align =“left”width =“290”height =“329”border =“0”cellpadding =“0”cellspacing =“0”＆gt; ＆LT; TR＆GT; ＆lt; td align =“left”bgcolor =“＃FFFFFF”style =“font-size：1; height：1px; mso-table-lspace：0; mso-table-rspace：0;”＆gt;＆lt; p style = “MSO的表lspace：0; MSO的表rspace：0;字体大小：0像素;线高度：0像素;” ＆GT; ＆lt; img align =“left”src =“http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png”alt =“Bote：47 millones”width =“290”style =“border：0px none; “ border =“0”/＆gt; ＆LT; / P＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆LT; /体＆GT; ＆LT; / HTML＆GT; ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 4

尽量不要在两个表之间留出任何空格：

</table><!--
--><table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">

或者：

...
    Global.hostWindow.Closing += hostWindow_Closing;
...

    private void hostWindow_Closing(object sender, EventArgs e)
    {
        Global.Closing = true;
    }
...

    while (Nodes.Count > 0 && Global.Closing == false)
    {
    ...
    }

OUTLOOK 2013中2张桌之间的差距为1px

4 个答案: