Question

我的电子邮件中有一个按钮，当通过Outlook查看时，其边框半径存在一些问题。它没有考虑我为边框半径和填充提供的样式。但是浏览器也支持相同功能，并且可以正常工作。有什么技巧可以使这些样式在Outlook中起作用？

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

Answer 1

根据CanIEmail，border-radius属性在Windows的Outlook中不起作用。

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

Answer 2

看起来您的按钮位于td标签内，将样式应用于按钮元素而不是td

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

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

Outlook不支持

border-radius属性，因为它使用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>

边界半径属性在前景中不起作用

4 个答案: