Есть ли способ исправить ширину электронной почты HTML в Outlook 2016?

Я отправляю электронную почту в формате HTML, но независимо от того, что я делаю, независимо от того, добавляю ли ширину к таблице, tr, td, div и body, содержимое электронной почты занимает всю ширину, несмотря ни на что. Это происходит как в Outlook 2016, так и во всех окнах 7, 8 и 10. Можно ли исправить ширину письма в Outlook 2016?


html css email outlook outlook-2016
person cytsunny    schedule 14.12.2017    source источник
comment
Я не сталкивался с этой проблемой с нашей структурой, но я слышал о проблемах с игнорированием ширины/высоты в Outlook 2016 при определенных обстоятельствах с очень небольшой логикой относительно того, почему. Если это поможет, мы используем внешнюю таблицу с width="100%" и внутреннюю таблицу с width="600px", и это, кажется, соблюдается.   -  person delinear    schedule 14.12.2017

Ответы (1)


arrow_upward
5
arrow_downward

В каждом шаблоне электронной почты вы должны установить таблицу с width="100%" и style="margin:0 auto", затем td с style="width:600px;" (это наиболее часто используемая / распространенная ширина для электронных писем), а затем вы можете разместить свой контент.

Вот пример кода и скрипка.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->  

    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html, body {
            font-family: 'Arial', sans-serif; 
        }
    </style>

</head>
<body bgcolor="#fff" style="margin:0px; padding:0px; -webkit-text-size-adjust:none;"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" height="100%" style="margin:0 auto;" width="100%">
    <tbody>
        <tr>
            <td align="center" bgcolor="#fafafa" height="100%" width="600">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td bgcolor="white" height="50" style="height:50px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="50" style="height:50px;" valign="middle" width="600"><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a href="#" style="color:#000;">Some inline version</a></span></span></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#FAB800" height="69" style="height:69px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="69" style="height:69px;" valign="middle" width="600"><img alt="" height="69" src="http://via.placeholder.com/600x69" style="display: block;" width="600" /></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="165" style="height:165px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="165" style="height:165px;" valign="middle" width="600">
                                        <p style="width:90%; font-weight:bold; color:#9f836f; font-size:35px; line-height:1.15; font-family: 'Arial', sans-serif; ">Lorem<br>
                                        <span style="color:#232323; font-size:22px; line-height:1.5; font-family: 'Arial', sans-serif; font-weight:normal;">Ipsum</span></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#fff" height="413" style="height:413px;" width="600">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td align="center" height="413" style="height:413px;" valign="middle" width="600">
                                        <img alt="" height="413" src="http://via.placeholder.com/600x413" style="display: block;" width="600" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
person Chaaampy    schedule 14.12.2017