如何为Outlook 2007电子邮件模板创建CSS按钮？

问题描述：

我正在尝试为电子邮件模板创建一个蓝色按钮。该电子邮件客户端Outlook 2007中我了解到，它不支持CSS3，所以我写了这个CSS的按钮：如何为Outlook 2007电子邮件模板创建CSS按钮？

HTML：

<html> 
    <a id="button" style: "text-decoration: none;" href=""> 
     <span style="color: white;">Button</span> 
    </a> 
<html>

CSS：

#button { 
    background-color: #4686E8; 
    border-radius: 10px; 
    display: block; 
    width: 142px; 
    height: 36px; 
    border-top: 2px #4686E8 solid; 
    border-bottom: 2px #4686E8 solid; 
    border-left: 2px #4686E8 solid; 
    border-right: 2px #4686E8 solid; 
    cursor: pointer; 
    padding: 14px; 
}

某些属性，例如border-radius和width/height在电子邮件模板中不起作用。它只是显示一个蓝色框，上面有文字“按钮”。如何在Outlook 2007模板中创建形状按钮？

您可以将样式设置为**内联** – Vishnu

答

Outlook - especially the new MSWord based windows versions - 往往有可怕的HTML/CSS支持。这是因为在Outlook 2003之后，微软决定停止使用IE作为其Outlook的渲染引擎，而是使用Word HTML--这不是真正的HTML。

因此，对于Outlook，您不仅可以处理通常与电子邮件相关的HTML限制，还可以处理Word HTML和XML的诡异。

您的某些样式（例如border-radius）在Outlook（campaign monitor has a great 'does it work' reference for HTML email CSS）中不受支持。

如果你非常需要边界半径等。你可以使用XML和补充MSO条件 - 但要小心，这不仅会膨胀代码，还会引起一些不寻常的行为，特别是在回复/转发中。

从这个代码开始的好地方是从buttons.cm，虽然不完美，可以给你一个很好的起点。

如何为Outlook 2007电子邮件模板创建CSS按钮？

相关推荐