边框半径属性在Outlook中无法工作

Question

我在电子邮件中有一个按钮，当通过Outlook查看时，它的圆角边框存在问题。它不考虑我设置的border-radius和padding样式。但是，在浏览器中支持并按预期工作。是否有任何技巧可以使这些样式在Outlook中生效？

 <td style="border-radius: 2px;" bgcolor="#0c6cd7">

- Jeeva D

Answer 1

由于 Outlook 使用 MS-Word 模板，不支持 border-radius 属性。我们需要对 Outlook 进行编码。请查看下面的代码片段，它适用于 Outlook、浏览器以及其他电子邮件客户端。

<td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
  </div>
</td>

- Jeeva D

---

请问您能解释一下这种方法吗？ - Ali Alizade

@AliAlizade 请使用上面的代码片段来调整您的边框半径。Outlook使用的模板不支持边框半径，因此我们在这里编写它。 - Jeeva D

Answer 2

根据CanIEmail，在Windows上的Outlook中，border-radius属性无法使用。

还可能存在一些填充问题，因此建议强烈使用表格，并使用空表行/列填充padding空间。

- lokarkristina

---

你说的完全正确！我正在按照你说的使用表格。但是，在边框半径属性方面，即使填充也无济于事。因此，我进行了研究并找到了一些有助于解决我的问题的东西。请查看我的答案如下。 - Jeeva D

Answer 3

我刚遇到了同样的问题。经过一些研究，我找到了一个网站，可以帮助生成Outlook的圆形按钮（以及更多）。

这是网站链接：https://buttons.cm/ 我知道这个问题很老了，但希望这能帮助其他人解决与Outlook按钮相关的问题 :)

- Ashot Aleqsanyan

Answer 4

看起来你的按钮在 td 标签内，应该将样式应用于按钮元素而不是 td。

<td bgcolor="#0c6cd7"> <button style="border-radius: 2px;"

- Manohar

---

这个不起作用，参考其他答案。 Outlook 忽略 border-radius 样式。 - BryanH

Answer 5

与 Outlook 无关，与您使用的元素有关。请尝试这样做：

<table>
<tr><td ><p style="border-radius: 2px; background:#0c6cd7">test</p></td></tr>
</table>

或者您可以使用单独的CSS，但这可能会影响其他样式：

table tr td {
  border-radius: 2px;
  display: block;
  background:#0c6cd7;
}

<table>
<tr><td >test</td></tr>
</table>

- Andrii Gordiichuk

---

这不起作用。Outlook使用Word模板限制了基于HTML的电子邮件的功能。这真是一个糟糕的选择，可能是他们试图接管HTML的遗留问题。 - BryanH