时事通讯的圆形按钮在 MS 邮件中不起作用

问题描述 投票:0回答:2

我需要为时事通讯制作一个圆形按钮,HTML 代码插入到用于时事通讯的网络基础工具中

大部分内容都可以,但 Windows 10 邮件客户端上带有圆角的黄色按钮失去了四舍五入和填充

我尝试使用不同的标签,例如按钮或更改为显示块并使用前缀CSS样式,但没有成功

如果不可能,我们将使用一些图像

<p><a href="https://mylink.com" target="_blank"><span style="display:inline-block; background-color:#ffce00; padding: 10px 45px; border-radius:20px; color: #000; font-weight: bold;">Click</span></a></p>
html css html-email newsletter
2个回答
1
投票

你可以尝试下面这样的东西(我已经在MS Outlook中成功测试了这种类型的代码),技巧是VML属性

arcsize

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://"
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>

源和生成器


0
投票

让 CSS 在邮件客户端中正确显示有点痛苦。当我进行此类工作时,我们在做出格式决定之前使用了Campaign Monitor兼容性图表。

另一个好工具是 Litmus,用于检查客户端之间的格式。

希望我能为您提供更好的答案,希望对您有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.