Question

我有以下简单的HTML - https://jsfiddle.net/mark69_fnd/6g0L0jwc/

<body style="background-color: white; font: normal 14px Verdana">
Hello
<p></p>
<a style="
  font: bold 11px;
  text-decoration: none;
  background-color: blue;
  padding: 10px;
  color: white;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;"
  href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
<p></p>
Good bye
</body>

现在，我正在尝试查看使用https://putsmail.com上的服务通过电子邮件发送时的呈现方式。

在gmail中：

在Outlook中：

是否可以以Outlook显示带填充的按钮的方式更改HTML代码，就像Gmail一样？

不幸的是，我不能使用图像，但其他一切都很好。

编辑1

LGSon的回答

<body style="background-color: white; font: normal 14px Verdana">
Hello <br>
<div style="display: inline-block;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;">
  <a style="display: inline-block;
  font: bold 11px;
  background-color: blue;
  border: 10px solid blue;
  text-decoration: none;
  color: white;"
  href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
</div>
<br> Good bye
</body>

在Outlook中生成以下结果：

这与我的需求非常接近，但沿着页面延伸的白条挡住了。

Answer 1

这会有用吗？

＆＃13;

<body style="background-color: white; font: normal 14px Verdana">
    Hello <br>
    <a style="display: inline-block;
      font: bold 11px;
      background-color: blue;
      border: 20px solid blue;
      text-decoration: none;
      color: white;"
      href="http://www.google.com">ACTIVATE YOUR ACCOUNT</a>
    <br> Good bye
    </body>

＆＃13;

如何将超链接设置为带有填充而没有图像的按钮，以便在Outlook中正确呈现？

1 个答案: