Подтвердить что ты не робот

Форматирование html-почты для Outlook

У меня есть html-бюллетень, который работает в большинстве почтовых клиентов, но форматирование перепутано в Outlook.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  body {
    background-color: #98AFC7;
  } 
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
    <tr>
        <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
    </tr>
    <tr>
        <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
    </tr>
    <tr>
        <td>
            <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
                <tr>
                    <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
                    <h3>Top Stories</h3> 
                        <ul>
                            <li>Topic 1</li>
                            <li>Topic 2</li>
                            <li>Topic 3</li>
                        </ul>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td valign="baseline" style="padding: 10px; border: 1px solid;">
                        <h3>Latest News</h3>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,  
                        </p>
                    </td>
                </tr>
            </table>                
        </td>
    </tr>
    <tr>
        <td cellpadding="10px" style="border: 1px solid; cellspacing: 0;  width: 100%; height: auto; text-align: center;">
            <strong>Copyright &copy 2011 Frost Miller Group </strong>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
            <center>
            <a href="#">Contact Us</a>
            &nbsp;
            <a href="#">Terms of Use</a>
            &nbsp;
            <a href="#">Trademarks</a>
            &nbsp;
            <a href="#">Privacy Statement</a>
            &nbsp;
            <a href="#">Site Feedback</a>
            </center>
        </td>
    </tr>
    </table>
</body>
</html>

Какие изменения необходимо внести, чтобы отобразить его правильно в Outlook?

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы дать вам конкретную помощь, вы должны объяснить, какие именно детали конкретно "перепутались" или, возможно, предложит скриншот. Это также помогает узнать, в какой версии Outlook вы столкнулись с проблемой.

В любом случае Руководство по кампаниям CampaignMonitor.com часто помогало мне отлаживать несоответствия почтового клиента.

Из этого руководства вы можете видеть, что несколько вещей просто не будут работать хорошо или вообще в Outlook, вот некоторые основные моменты более важных:

  • Различные типы более сложных селекторов , например. E:first-child, E:hover, E > F (Детский комбинатор), E + F (Смежный корректор сиблинга), E ~ F (Общий синонимы). К сожалению, это связано с обходными решениями, такими как встроенные стили.
  • Некоторые свойства шрифта, например. white-space не будет работать.
  • Свойство background-image не будет работать.
  • В свойствах Box Model имеется несколько проблем, наиболее важно height, width, а версии max- либо не используются, либо имеют ошибки для определенных элементов.
  • Проблемы с позиционированием и отображением (например, display, float и position) отсутствуют.

Короче: сочетание CSS и Outlook может быть болью. Будьте готовы использовать множество уродливых обходных решений.

PS. В вашем конкретном случае в вашем html есть две незначительные проблемы, которые могут вызывать нечетное поведение. Там "align=top", где вы, вероятно, хотели использовать vertical-align. Также: cell-padding для td не существует.

Ответ 2

Вы обязательно должны проверить MSDN, что Outlook будет поддерживать в отношении css и html. Ссылка находится здесь: http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx. Если у вас нет офиса Office 2007, вам действительно нужно обновиться, так как существуют значительные различия между 2007 и предыдущими выпусками. Также попробуйте сохранить полученный файл электронной почты в файл и изучить его с помощью firefox, вы увидите, что изменилось в Outlook, и, возможно, задать более конкретный вопрос. Вы можете использовать Word для просмотра электронной почты как своего рода предварительного просмотра (но вы не получите информацию о том, какие стили/не применяются.