2017-10-16 8 views
0

メールテンプレートの青いボタンを作成しようとしています。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; 
} 
電子メールクライアントは、私がボタンのこのCSSを書いたので、それはCSS3をサポートしていないことを学んだ展望2007です

いくつかのプロパティ、たとえばborder-radiusとwidth/heightは電子メールテンプレートでは機能しません。それはちょうどそれにテキスト "ボタン"と青いボックスを表示しています。 Outlook 2007テンプレートで整形ボタンを作成するにはどうすればよいですか?

+0

**インライン** – Vishnu

答えて

1

Outlook - especially the new MSWord based windows versions - ひどいHTML/CSSサポートを持つ傾向があります。これは、Outlook 2003の後、MicrosoftはOutlook用のレンダリングエンジンとしてIEを使用するのをやめ、実際のHTMLではないWord HTMLを使用することにしたためです。

Outlookの場合、電子メールに通常関連付けられているHTMLの制限だけでなく、Word HTMLとXMLの奇妙さも考慮して作業しています。

Outlook(campaign monitor has a great 'does it work' reference for HTML email CSS)では、一部のスタイル(境界線の半径など)がサポートされていません。

境界線の半径などが必要な場合は、XMLと補足的なMSO条件を使用できますが、注意してください。これによりコードが膨らむだけでなく、特に返信/転送で異常な動作が発生する可能性があります。

このコードで始めるのに適した場所はbuttons.cmですが、これは完璧ではありませんが、あなたには素晴らしい出発点を与えることができます。

関連する問題