HTML在某些电子邮件客户端中无法正确显示

我已经收到了在电子邮件中发送的HTML，但一些接收者在其电子邮件客户端遇到问题（我怀疑Outlook）。HTML在某些电子邮件客户端中无法正确显示

我已经检查并重新检查了这个HTML代码，但我找不到一些元素不在正确位置的原因，所以我可以使用一些帮助。

我突出了 “错误” 暗红色线条：

buggy mail

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>'.$mail['subject'].'</title> 
</head> 

<body> 
<table style="border: 0; border-spacing: 0; line-height: 0; margin: 0; padding: 0; width: 559px;"> 
    <tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><img src="'.$root.$cards['path']['mail'].'0-0-'.$mail['card'].'.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td style="border: 0; margin: 0; padding: 0; width: 120px;"><img src="'.$root.$cards['path']['mail'].'1-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td rowspan="2" style="border: 0; margin: 0; padding: 0; vertical-align: top; width: 210px"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; margin: 0; padding: 0; word-wrap: break-word; width: 210px;">'.$mail['message'].'<br /><br />'.$mail['from_name'].'</p></td> 
     <td colspan="3" style="border: 0; margin: 0; padding: 0; width: 269px;"><img src="'.$root.$cards['path']['mail'].'1-2.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td style="border: 0; margin: 0; padding: 0; width: 120px;"><img src="'.$root.$cards['path']['mail'].'2-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td style="border: 0; margin: 0; padding: 0; width: 65px;"><img src="'.$root.$cards['path']['mail'].'/2-2.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
     <td style="border: 0; margin: 0; padding: 0; vertical-align: top; width: 170px;"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; line-height: 12px; padding: 0; width: 170px;">'.$mail['to_name'].'</p></td> 
     <td style="border: 0; margin: 0; padding: 0; width: 34px;"><img src="'.$root.$cards['path']['mail'].'2-4.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><img src="'.$root.$cards['path']['mail'].'3-0.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></td> 
    </tr><tr style="border: 0; margin: 0; padding: 0;"> 
     <td colspan="5" style="border: 0; margin: 0; padding: 0; width: 559px;"><p style="border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 12px; margin: 0; padding: 0; word-wrap: break-word; width: 210px;"><a href="http://www.geschiedeniszeeland.nl" target="_blank"><img src="'.$root.'images/site-button.jpg" style="border: 0; margin: 0; padding: 0;" alt="" /></a></p></td> 
    </tr> 
</table> 
</body> 
</html>

不要在HTML担心PHP的位，因为工作像一个魅力。

来源

2012-03-21 Tim S.

无论问题是什么，它都会变得微妙。如果我们正在查看HTML而不是PHP代码，将会更容易。 – dldnh 2012-03-21 09:46:07

首先，无论何时使用img标签，您都必须使用style =“display：block” - 这是为了避免图像下面的1px白线。

其次，在tabel而不是collspan/rowspan中使用tabel会更好。

我也可以看到你有一个559pw的tabel，但你的第3行是：120 + 65 + 170 + 34 = 389 px，而且你也错过了一列。

来源

2012-03-21 10:24:08 Caelea

我已经更改了图像以阻止并修复了您提到的行宽。源代码将返回给想要自己上传的客户（天知道为什么），所以我只需要等待。如果确实解决了这个问题，我会非常高兴。提前致谢！ – 2012-03-23 11:48:16

HTML在某些电子邮件客户端中无法正确显示

回答

相关问题