跨电子邮件客户端 HTML 邮件 v:rect 按钮宽度为 100%

Posted 2023-03-24

【中文标题】跨电子邮件客户端 HTML 邮件 v:rect 按钮宽度为 100%

【英文标题】：Cross e-mail client HTML mail v:rect button width of 100 percent

【发布时间】：2020-06-15 17:52:39

【问题描述】：

我有这个丑陋的代码，用于在 MS Outlook 的 html 电子邮件中创建一个按钮：

  <!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.website.com" target="_blank" style="height:50px;width:100%;v-text-anchor:middle;" stroke="f" fillcolor="#009CDE">
      <w:anchorlock/>
      <center>Watch the brand commercial</center>
  </v:rect>
  <![endif]-->

当我使用 600px 的宽度时，它确实有效。但是当我在 MS Outlook 中调整屏幕大小时，它没有响应。

但如果我使用 100% 的 with ，它就会中断。那么是否有可能在v:rect 元素上使用100% 的宽度？

【参考方案1】：

v:rect 使用 mso-width-percent:1000; 代替 width:100%

1000 = 100%

但是为什么要让自己头疼呢？创建一个可在 Outlook和其他任何地方使用的响应式按钮，您猜对了，它是一个表格！

<table  border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
                <table  style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
                    <tr>
                        <td style="padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;border-collapse:collapse;">
                            <center>
                                <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                                    <tbody>
                                        <tr>
                                            <td align="center" bgcolor="#D90432"  style="-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; border: none; line-height:20px;color:#ffffff;">
                                                <a href="https://www.google.com.au" style="text-decoration: none;color:#ffffff;display:block;">Watch This</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </center>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

或者您可以只使用锚标记，但在 Outlook 中您会丢失背景。

【讨论】：

听起来很有希望。我将在工作中尝试下一次邮件。

我尝试使用 mso-width-percent 但宽度基于视口宽度，而不是父宽度:(