HTML 电子邮件模板未正确呈现

Question

我有一个包含以下代码的电子邮件模板：

<html>
  <head></head>
  <body style="font-family:Verdana">
    <h1 style="font-size:36px;text-align:center">Welcome!</h1>
    <div style="text-align:center;margin:50px">
      <span style="font-size:18px">We are happy to see You joined! Please press the button below to confirm Your account.</span>
    </div>
    <div style="text-align:center">
      <a style="background-color:#3a86e0;border-radius:4px;color:#fff;font-size:18px;padding:8px 32px 8px 32px;text-decoration:none;display:inline-block" href="{parameter}">Confirm email address</a>
    </div>
    <div style="text-align:center;margin:50px">
      <span style="font-size:12px">
        <b>You received this message because Your email address was used to create an account in our project. Ignore this in case of a mistake.</b>
      </span>
    </div>
  </body>
</html>

当谈到在网络浏览器中呈现时，它看起来很好，但我在 Outlook 应用程序或内置 Windows 邮件应用程序中打开此类电子邮件，角半径属性 <a> 标记被忽略，并且 link 是用方角绘制的。

请查看下面的图片以了解不同之处。

这是它在应用程序中的呈现方式：

这是它在电子邮件网站上的呈现方式：

我在网上搜索了类似的问题，但没有成功。你能帮帮我吗，为什么相同的 HTML 呈现不同，我该如何解决这个问题？谢谢。

Answer 1

一些电子邮件提供商不支持填充和边框半径。

您可以尝试生成一个防弹按钮 here，该按钮将为那些不受支持的属性使用解决方法

HTML 电子邮件模板未正确呈现

HTML email template is not rendering correctly

html

rendering

html-email