Проблема с пробелами в кнопке электронной почты VML - PullRequest
Новая
       68

Проблема с пробелами в кнопке электронной почты VML

0 голосов
/ 20 ноября 2018

Я работаю с некоторыми кодами HTML / CSS и VML, чтобы сделать кнопки одинаковыми в большинстве почтовых клиентов.Поскольку Outlook не поддерживает закругленные углы, мне нужно добавить код VML для достижения этого эффекта.Мне удалось исправить большинство проблем с выравниванием, но я не могу понять, откуда берется расстояние сверху / снизу на кнопке и как от него избавиться?

Я смог использовать некоторыеVML-код этого генератора пуленепробиваемых почтовых кнопок и справочного сайта Microsoft

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

Также похожий вопрос можно найти здесь , но решение, если оно там, не сработало в моем случае, или я мог бычто-то упустил?

Ниже приведен код, с которым я работаю.Обратите внимание, что цвет фона кнопки VML был установлен зеленым, а таблица, предназначенная для кнопки, синего цвета.Я сделал это, так как мне было легче устранять неполадки.

До сих пор мне удавалось выявить странное заполнение вокруг самого текста, исходящего из встроенного CSS на теге, но я не могу понять, где эти теслучайные линии пробела вверху и внизу кнопки VML исходят из. 

 <!-- button -->
                      <div align="center" class="float-center" >
                     <!--[if mso]>
                       <v:roundrect
                         xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
                         <v:stroke color="#1e6db1"/>
   
                         <center>

                     <![endif]-->
            <table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
             
              <tr style="padding:0;text-align:left;vertical-align:top">
               <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
                 
                  <tr style="padding:0;text-align:left;vertical-align:top;">
                   <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">

                    <a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;"> 
                      <span style="color:#fefefe;">
                      Finance &rsaquo;
                      </span>
                     </a>
                      
                    </td></tr></table></td></tr></table>
                        
                           <!--[if mso]>
                         </center>
                      </v:roundrect>
                     <![endif]-->
                     </div>
                    <!-- end button -->

1 Ответ

0 голосов
/ 20 ноября 2018

В целом материал VML добавляет к вашему размеру много ненужного.Я использую это для своего кода кнопки, и он работает на всех основных лакмусовых клиентах: 

  <table class="button"  border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
    <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:#FFFFFF;">
        <a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
        SHOP NOW
        </span></a>
      </td>
    </tr>
  </table>

У Litmus также есть очень полезная статья о кнопках:

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

...