HTML не отображается правильно в некоторых почтовых клиентах - PullRequest
0 голосов
/ 21 марта 2012

У меня есть этот 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>

не беспокойтесь о кусочках PHP в HTML, потому что это работает как шарм.

1 Ответ

0 голосов
/ 21 марта 2012

Прежде всего, когда вы используете тег img, вы должны использовать style = "display: block" - чтобы избежать белой линии размером 1px под изображением.

Во-вторых, лучше использовать tabel в tabel, а не collspan / rowspan.

Я также вижу, что у вас 559pw с табелем, но ваша 3-я строка: 120 + 65 + 170 + 34 = 389 px, и вы также пропускаете столбец.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...