Проблемы с изображением Outlook Outlook 120 DPI - Изображения не отображаются правильно - PullRequest
Новая
       14

Проблемы с изображением Outlook Outlook 120 DPI - Изображения не отображаются правильно

0 голосов
/ 16 мая 2019

Я прочитал исправления, предложенные другими для корректной визуализации моей HTML-почты в outlook 120 DPI, но исправления, похоже, не работают. Я не уверен, что наш существующий CSS, который мы применили, мешает исправлениям работать. Мы проверяем наши электронные письма в Litmus, и по большей части электронные письма и изображения отображаются правильно во всех ESP, кроме Outlook 120 DPI. Похоже, что электронная почта прошла через измельчитель и выплюнула.

Я попытался применить исправления, описанные в этом блоге здесь: https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013

Но они пока не оказали никакого влияния. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office" >
  <head> 
    <meta name="viewport" content="width=device-width" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=edge" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
    <title>Smartsheet</title> 

    <!-- Default Styles --> 
    <style type="text/css">
            .ExternalClass {
                width: 100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            }
            table { 
                border-spacing: 0px !important; 
                mso-table-lspace: 0pt; 
                mso-table-rspace: 0pt;
                table-layout: fixed;
            }
            table table { 
                table-layout: auto; 
            }
            h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
                  color: #363639;
            }
            @-ms-viewport { 
                width: device-width; 
            }
            h1, h2, h3, h4 {
                font-weight: normal;
<!--[if gte mso 9]><xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml><![endif]-->
 .superscript {
                vertical-align:.9em !important;
                font-size:.5em !important;
<!-- Media Queries --> 
        <style type="text/css">
            @media only screen and (max-width: 640px) {
                .content_wrap, .full-width {
                    width: 100% !important;
                    height: auto !important;
                }
                td.center-mobile {
                    text-align: center !important;
                }
                img.center-mobile{
                    margin: 0 auto;
                }
 <!--[if mso]>
<style> body, table tr, table td, p, a, span, .header, .header-white, .header-description, .header-description-white, .subheader, .subheader-white, .left-aligned, .left-aligned-white, .center-aligned, .center-aligned-white, .preheader, .preheader-light, .logo-bar-label, .list, .quote, .quote-title, .quote-white, .quote-title-white, .menu, .white-menu, table.MsoNormalTable { font-family: Arial, Helvetica, sans-serif !important; }</style>
<!--<![endif]--> 
</head> 
    <body style="margin: 0; padding: 0; {{my.text-paragraph_style:default=edit me}}">
        <div class="mktEditable" id="logo-banner" mktoname="logo-banner">
            <!-- Wrapper table is percent width, no inline style needed -->
        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" bgcolor="{{my.logo-bar_background:default=edit me}}">
            <tr>
                <td align="center" style="{{my.logo-bar_border-style:default=edit me}}">
                    <table width="640" cellpadding="15" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                        <tr>
                            <td align="left" class="full-width" width="170">
                                <!-- LOGO -->
                                <p style="margin: 0; padding: 0; margin-left: 5px !important;">
                                    <a href="https://www.smartsheet.com?utm_source={{my.utm_source:default=marketo}}&utm_medium={{my.utm_medium:default=email}}&utm_campaign={{my.utm_campaign:default=other}}&mem=logo" target="_blank">
                                        <img style="display: block; color: #ffffff !important; font-size: 22px !important; font-weight: bold !important; {{my.image_style:default=edit me}}" src="http://offers.smartsheet.com/rs/464-ONM-149/images/logo-full-white_340x66_trim.png" border="0" alt="✓ Smartsheet" width="170" height="28" align="absbottom" id="logo"/>
                                    </a>
                                </p>
                                 <!-- Use inline styles for pixel widths and heights -->
                                 <!-- Still need height attribute for Gmail -->
                            </td>
                            <td width="430" align="right" id="logo-bar-label">
                                <p style="{{my.text-label_style:default=edit me}} margin-right: 5px !important;" class="logo-bar-label">{{my.asset_type:default=edit me}}</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </div>
        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" bgcolor="#f3f3f3" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
            <tr> 
                <td align="center" class="mktEditable" id="body" mktoname="body">
                     <table width="100%" cellpadding="20" cellspacing="0" border="0" align="center" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                         <tr>
                             <td align="center">
                                 <!--START Header With Button-->
                                 <table align="center" border="0" cellpadding="20" cellspacing="0" class="full-width" width="600" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                     <tr>
                                         <td align="center" class="full-width" width="560">
                                             <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                 <tr>
                                                     <td align="center" height="10"></td>
                                                 </tr>
                                             </table>
                                             <p style="text-align: center; {{my.text-preheader_style:default=edit me}}" class="preheader">YOUR MAY NEWS</p>
                                             <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                 <tr>
                                                     <td align="center" height="10"><!--spacer--></td>
                                                 </tr>
                                             </table>
                                             <h1 style="text-align: center; font-size: 40px; {{my.text-header_style:default=edit me}}" class="header">Free Up Time for High-Value Work With&nbsp;Automation</h1>
                                         </td>
                                     </tr>
                                 </table>
                                 <!--START Menu-->
                                 <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                     <tr>
                                         <td align="center" class="full-width" id="menu" width="560">
                                             <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                 <tr>
                                                     <td>
                                                         <table class="menu-space" border="0" cellspacing="0" cellpadding="0" width="40" height="0" align="left">
                                                             <tr>
                                                                 <td>&nbsp;</td>
                                                             </tr>
                                                         </table>  
                                                         <!--[if mso]></td><td><![endif]-->
                                                        <!--ITEM 1-->
                                                        <table class="four-col" border="0" cellspacing="0" cellpadding="0" width="130" align="left">
                                                            <tr>
                                                                <td align="center">
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                                        <tr>
                                                                            <td align="center" height="10"><!--spacer--></td>
                                                                        </tr>
                                                                    </table>
                                                                    <a href="#Industry"><img src="https://offers.smartsheet.com/rs/464-ONM-149/images/industry-trends%402x.png" alt="1" height="30" width="32" border="0" style="display: block; color: #0e2947 !important; font-size: 12px !important; {{my.image_style:default=edit me}}" align="absbottom" class="table-image"></a>
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                                        <tr>
                                                                            <td align="center" height="10"><!--spacer--></td>
                                                                        </tr>
                                                                    </table>
                                                                    <p style="text-align: center; {{my.text-menu_style:default=edit me}}" class="menu"><a href="#Industry" style="color: #0e2947; text-decoration: none;">Automate These<br/>3 Time Wasters</a></p>
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                                        <tr>
                                                                            <td align="center" height="20"><!--spacer--></td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!--[if mso]></td><td><![endif]-->
                                                        <!--ITEM 2-->
                                                        <table class="four-col" border="0" cellspacing="0" cellpadding="0" width="130" align="left">
                                                            <tr>
                                                                <td align="center">
                                                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="full-width" role="presentation" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
                                                                        <tr>
                                                                            <td align="center" height="15"><!--spacer--></td>
                                                                        </tr>
                                                                    </table>

Ожидаемые результаты можно увидеть здесь: https://litmus.com/pub/proofs/6beaf19

Фактические результаты показывают, что размеры изображений слишком велики, а форматирование полностью отключено в outlook 120 DPI. Обратите внимание, что в моем коде выше я вставил только его части, но они наиболее применимы.

...