Как исправить ширину пуленепробиваемой кнопки в Microsoft Surface?

Question

Я не разработчик, и это мой первый вопрос, поэтому, пожалуйста, простите мое форматирование и т. Д. Я был бы признателен за любую помощь.

Я использую пуленепробиваемую кнопку отсюда: https://gist.github.com/elidickinson/9424116 в нескольких электронных письмах HTML.

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

Я пробовал регулировать ширины без успеха. Я знаю, что прокомментированный код предназначен для работы с Outlook (что он делает), но, видимо, не на поверхности?

Первоначально я использовал:

<tr> 
<td valign="top" style="font-size:0px; padding-left:30px;"> 
    <div> 
    <!--[if mso]> 
     <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="10%" stroke="f" fillcolor="#FFB549"> 
     <w:anchorlock/> 
     <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;"> 
      Go to my home 
     </center> 
     </v:roundrect> 
     <![endif]--> 
     <![if !mso]> 
     <table cellspacing="0" cellpadding="0"> <tr> 
     <td align="center" width="150" height="40" bgcolor="#FFB549" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"> 
     <a href="http://www.example.com" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"> 
     <span style="color: #ffffff;"> 
      Go to my home 
     </span> 
     </a> 
     </td> 
     </tr> </table> 
     <![endif]> 
    </div> 
    </td> 
    </tr> 

А также пытались:

<tr> 
<td valign="top" style="font-size:0px; padding-left:30px;"> 
    <div> 
     <table cellspacing="0" cellpadding="0"> <tr> 
     <td align="center" width="150" height="40" bgcolor="#FFB549" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;"> 
     <!--[if mso]> 
     <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="10%" stroke="f" fillcolor="#FFB549"> 
     <w:anchorlock/> 
     <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;"> 
      Go to my home 
     </center> 
     </v:roundrect> 
     <![endif]--> 
     <![if !mso]> 
      <a href="http://www.example.com" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"> 
     <span style="color: #ffffff;"> 
      Go to my home 
     </span> 
     </a> 
     <![endif]> 
     </td> 
     </tr> 
     </table> 
    </div> 
     </td> 
     </tr> 
    </table> 
</td> 
</tr> 

Answer 1

Вы пробовали использовать пуленепробиваемые кнопки из фактического источника? http://buttons.cm/

Не могу сказать, будет ли это решить проблему поверхности, как у меня нет тестового устройства, но код GitHub и код buttons.cm отличаются, например, другой таблицы внутри DIV, который кажется странным меня.