Сдвиг текста в Outlook влево при использовании VML - PullRequest
Новая
       81

Сдвиг текста в Outlook влево при использовании VML

0 голосов
/ 02 октября 2018

Я использую VML, чтобы иметь фоновые изображения в окнах Outlook, но когда я использую этот код, он заставляет мои кнопки смещаться на 20 пикселей влево в Outlook Windows.

Я пробовал выравнивание текста и выравнивание по центрувезде без особой удачи.

Устранение проблемы с исправлениями VML, но затем удаление bg img в Outlook.

Снимок экрана: enter image description here Любой ввод приветствуется.

Скринкаст по сравнению с выпуском: https://screencast.com/t/7vAj6509FyH

<!DOCTYPE HTML>
<html lang="en">
<!-- Javelin v1.01 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>EVERY SEASON STARTS HERE</title>

  <style type="text/css">
  /* inject:css/mail.min.css */
  a,body,span,table,td{-ms-text-size-adjust:100%}body,div[style*="margin: 16px 0;"]{margin:0!important}a,body,span,table,td{-webkit-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;display:block;outline:0;text-decoration:none}.a6S,.mobileOnly,img.g-img+div{display:none!important}a:link,span.MsoHyperlink{mso-style-priority:100!important;color:inherit!important;color:inherit}a:visited{color:inherit!important;color:inherit}table{border:0;border-collapse:collapse!important;border-color:inherit}body{font-size:16px;padding:0!important;width:100%!important}.aBn,.unstyle-auto-detected-links *,[x-apple-data-detectors]{border-bottom:0!important;cursor:default!important;color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}a:link,span.MsoHyperlink{color:inherit;text-decoration:none}a span,span.yshortcuts{color:#FFF}span.yshortcuts:active,span.yshortcuts:focus,span.yshortcuts:hover{text-decoration:none;color:#FFF;background-color:none;border:none}#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}.a6S{opacity:.01!important}.h1,.h2,.h3,h1,h2,h3{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:700}.img,.img-headline{color:#FFF;font-family:sans-serif!important;text-align:center}.h1,h1{font-size:40px;line-height:44px}.h2,h2{font-size:30px;line-height:34px}h3{font-size:24px;line-height:28px}.h3,.img{font-size:18px}.h3{margin:0 0 8px}.img{background-color:#006554;line-height:22px}.img-headline{font-size:36px;font-weight:900;line-height:42px}p{/*!important;*/margin-bottom:1em}.contact{color:#FFF!important;text-decoration:none!important}.webkit{max-width:640px;margin:0 auto}@media all and (min-width:640px){.left{text-align:left;text-align:left!important}.right{text-align:right;text-align:right!important}}@media all and (max-width:639px){.mobile,.mobile_triggerproduct{display:inline-block!important}.border-container,.container,.mobile,.mobile_triggerproduct,.wrapper{padding:0!important;width:100%!important}.border-container,.container,.img,.img-headline,.mobile,.wrapper,table[class=button]{width:100%!important}.wrapper{margin:0!important}.border-container{max-width:95%}.mobile_triggerproduct{max-width:639px!important}.img,.img-headline{height:auto!important}[class=mobileOff]{width:0!important;display:none!important}[class*=mobileOn]{display:block!important;max-height:none!important}.center{text-align:center!important}.mobileOnly{display:block!important}.hideOnMobile{display:none!important}.left,.right{text-align:center;text-align:center!important}}@media all and (max-width:480px){.h1,h1{font-size:28px!important;line-height:32px!important}.h2,h2{font-size:24px!important;line-height:28px!important}.h3,h3{font-size:18px!important;line-height:22px!important}}
  /* endinject */
  /* inject:css/fonts.min.css */
  @media screen{@font-face{font-family:DINPro-Light;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.svg#DINPro-Light) format('svg');font-weight:400;font-style:normal}@font-face{font-family:DINPro-Medium;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.svg#DINPro-Medium) format('svg');font-weight:400;font-style:normal}@font-face{font-family:DINPro-Black;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.svg#DINPro-Black) format('svg');font-weight:400;font-style:normal}}
  /* endinject */
  /* inject:css/brand.min.css */
  .freeShip,body{font-weight:400}.flashPromo,.flashPromoSmall{mso-line-height-rule:exactly}.navbar a,a{text-decoration:none}a{color:inherit;display:block;max-width:100%;text-decoration:none text-align: center}body{font-family:Arial,sans-serif;margin:0!important;padding:0;background-color:#FFF;-ms-text-size-adjust:100%}.bonus-product-details{color:#F5F5F5;font-size:12px;line-height:18px;margin:0 10px}.disclaimerDark,.disclaimerLight{font-family:Arial,sans-serif;font-size:10px;font-size:10px!important;letter-spacing:.05rem;line-height:14px;mso-line-height-rule:exactly}.disclaimerDark{color:#FFF!important}.disclaimerLight{color:#212121!important}.freeShip{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px}.headline,.logo{font-weight:900}.headline{font-family:DINPro-Black,Arial,sans-serif!important;font-size:36px;line-height:40px;margin:20px 0 0;padding:0 20px}.logo{background-color:#006554;color:#FAFAFA;font-family:sans-serif;font-size:24px;line-height:36px;text-align:center;max-width:175px;width:117px;height:auto}.navbar,.navbar .column-nav,.navbar a{text-align:center!important}.navbar{font-size:0}.navbar .column-nav{display:inline-block;max-width:320px;vertical-align:top;width:auto}.navbar a{display:inline-block;font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px;padding:16px 0;text-transform:uppercase}.footer,.preheader{font-family:Arial,sans-serif}.preheader{color:#707070;Margin-top:4px;Margin-bottom:0;Margin-left:10px;Margin-right:10px;font-size:11px}.one-column p{margin-bottom:14px!important;margin-top:14px!important}.flashPromoSmall{font-family:DINPro-Light,Arial,sans-serif!important;font-size:32px;font-weight:300;line-height:32px}.flashPromo{font-family:DINPro-Black,Arial,sans-serif!important;font-weight:900;line-height:40px}.pricing,.productInfo{font-family:Arial,sans-serif!important;margin:0}.pricing{font-weight:700;line-height:24px;font-size:14px}.productInfo{font-size:16px;font-weight:500}.productNameTab{font-size:18px;line-height:20px;margin:4px 20px;padding:0}.productPriceTab{font-size:16px;line-height:18px margin: 4px 0;padding:0}.productPromo{font-family:DINPro-Black,Arial,sans-serif;font-size:28px;font-weight:700;line-height:34px;margin:0 20px;padding:0}.subheadline{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:30px;line-height:34px;font-weight:500;margin:0;padding:0 20px}.text{padding-top:16px}.valueCopy{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:400!important;margin:0}.welcome{color:#F6992F;font-family:DINPro-Medium,Arial,sans-serif;font-size:26px;margin:0;padding:0}.text{padding:16px 16px 0}.deviceWidth{width:33%;max-width:211px!important}.deviceWidth200{width:100%!important;max-width:180px}@media only screen and (max-width:480px){.bonus-product-details{font-size:12px!important;line-height:18px!important}.headline{font-size:40px!important;line-height:44px!important}.subheadline{font-size:24px!important;line-height:28px!important}.productNameTab,.productPriceTab{font-size:90%!important;line-height:95%!important;margin:8px 10px!important}.productPromo{font-size:24px!important;line-height:28px!important}.welcome{font-size:20px!important;line-height:21px!important}}@media only screen and (max-width:639px){.deviceWidth,.deviceWidth200{display:inline-block!important}table[class=button]{width:100%!important}.deviceWidth{width:49%!important;max-width:211px}.deviceWidth200{width:32%!important}}
  /* endinject */
  </style>
  <!--[if gte mso 9]><xml><o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
  <!--[if (gte mso 9)|(IE)]><style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->

</head>
<body style="margin:0; padding:0; background-color:#FFFFFF;">
  <!--[if gte mso 10]><style> /* Style Definitions for MSO 2010 */ table.MsoNormalTable, p, span, div, table, tr, td, th, a, h1, h2, h3 { mso-style-priority:99; font-family:"Arial","sans-serif"; } </style><![endif]-->
  <center>
    <div class="webkit"><!--[if (gte mso 9)|(IE)]><table width="640" align="center"><tr><td><![endif]-->
    <table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td align="center" valign="top" style="margin:0; padding:0;">
<!--# EMAIL BODY CREATIVE #############-->


<!--# Hero w/ Coupon (embedded background – image headline - left-aligned)-->
  <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%; background-position:right top !important; background-size:cover !important;"  bgcolor="#006554">
    <tr>
      <td background="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:640px; height:790px;" src="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg"/>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; position: absolute; width:640px; height:790px;">
            <v:fill opacity="0%" color="#F8F8F8"/>
            <v:textbox inset="20px,0,0,0">
        <![endif]-->
          <div>

            <table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" >

              <tr>
                <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
              </tr>
              <tr>
                <td align="center" valign="top" style="padding: 0 16px;">
                  <table width="600px" cellpadding="0" cellspacing="0" border="0" class="container">
                    <tr>
                      <td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-right:4px; padding-bottom: 16px !important;">
                        <!-- button-basic -->
                            <table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F5F5F5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
                              <tr>
                                <td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#212121;">
                                  <a href="http://heroLink.com" target="_blank" style="color:#212121; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#212121;">
                                SHOP NOW
                                  </span></a>
                                </td>
                              </tr>
                            </table>
                        <!-- /button-basic -->
                      </td>
                      <td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-left:4px; padding-bottom: 16px !important;">
                        <!-- button-border -->
                        <table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:inherit; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
                          <tr>
                            <td width="100%" height="52" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#F5F5F5; border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
                              <a href="http://heroLink.com" target="_blank" style="color:#F5F5F5; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#F5F5F5;">
                                VIEW IN-STORE COUPON
                              </span></a>
                            </td>
                          </tr>
                        </table>
                        <!-- /button-border -->
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!--[if (gte mso 9)|(IE)]><tr><td height="15" style="font-size:15px; line-height:15px;">&nbsp;</td></tr><![endif]-->
            </table>

            <!--spacer--><table><tr><td height="40" style="font-size:40px; line-height:40px;">&nbsp;</td></tr></table><!--/spacer-->

            <p class="disclaimerDark" style="font-family:Arial, sans-serif; Font-size:12px; font-size:12px !important; letter-spacing:normal; line-height:11px; text-align:center; margin:10px 0; padding:0 20px; color:#F5F5F5;">
              <!--disclaimer copy-->
              Replace this line of text with your disclaimer copy.
            </p>

        </div>
        <!--[if gte mso 9]>
        </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
<!--/END Hero w/ Coupon (embedded background - image headline – left-aligned)-->





<!--/ EMAIL BODY CREATIVE /////////////-->

            </td>
        </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></div>
  </center>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

Это одна из моих любимых почтовых ошибок / проблем / предостережений.

padding-left не работает в Outlook, когда внутри формы VML.

Многие стили могут быть удаленыиз вашего кода кнопки.Я также попытался бы добавить фиксированную ширину к таблице .button.Это в сочетании с центром text-align на a родительском элементе td должно сохранять копию по центру. 

<table align="center" class="button" border="0" cellpadding="0" cellspacing="0" width="150">
  <tr>
    <td align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#ffffff; padding-top:16px; padding-bottom:16px;">
      <a href="http://TabHeroLink.com" target="_blank" style="color:#ffffff; text-decoration:none;">
        SHOP THIS DEAL
      </a>
    </td>
  </tr>
</table>

Также следует отметить, что ваша белая кнопка использует align="left", потянув ее дальшенад.Измените это на center

0 голосов
/ 09 октября 2018

Я смог исправить это самостоятельно, реализовав таблицу-призрак outlook с таблицей на 640, т. Д. На 600 и обе с выравниванием = "центр"

0 голосов
/ 03 октября 2018 
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">

Вы можете изменить приведенный выше код на следующий код: 

<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden;margin:0 20px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin:0 18px">
...