边框半径属性在 Outlook 中不起作用

Question

我的电子邮件中有一个按钮，当通过 outlook 查看时，它的边框半径存在一些问题。它没有考虑我为 border-radius 和 padding 提供的样式。但同样在浏览器中受支持并且按预期工作。是否有任何 hack 可以使这些样式在 outlook 中工作？

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

Answer 1

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

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

Answer 2

根据 CanIEmail border-radius 属性在 Windows.

上的 Outlook 中将无法使用

填充也可能存在一些问题，因此我建议强烈使用 tables 并将 padding space 填充为空 table rows/columns.

Answer 3

与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>

Answer 4

border-radius 属性 outlook 不支持，因为它使用 MS-word 模板。我们也需要为 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>

边框半径属性在 Outlook 中不起作用

Border-radius property not working in outlook

css

outlook-2016

边框半径 属性 在 Outlook 中不起作用

Border-radius property not working in outlook

css

outlook-2016

边框半径属性在 Outlook 中不起作用