Question

我有一个通过电子邮件发送的HTML，但有些接收者在他们的电子邮件客户端遇到问题（我怀疑是Outlook）。

我已经一遍又一遍地检查并重新检查了这个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位，因为它就像魅力一样。

Answer 1

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

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

我还可以看到你有一个559pw的表格，但你的第3行是：120 + 65 + 170 + 34 = 389 px，你也错过了一个专栏。

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

1 个答案: