web-dev-qa-db-ja.com

Outlook用のHTMLメールのフォーマット

ほとんどの電子メールクライアントで機能するhtmlニュースレターを持っていますが、Outlookで書式設定が台無しになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  body {
    background-color: #98AFC7;
  } 
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
    <tr>
        <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
    </tr>
    <tr>
        <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
    </tr>
    <tr>
        <td>
            <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
                <tr>
                    <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
                    <h3>Top Stories</h3> 
                        <ul>
                            <li>Topic 1</li>
                            <li>Topic 2</li>
                            <li>Topic 3</li>
                        </ul>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td valign="baseline" style="padding: 10px; border: 1px solid;">
                        <h3>Latest News</h3>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,  
                        </p>
                    </td>
                </tr>
            </table>                
        </td>
    </tr>
    <tr>
        <td cellpadding="10px" style="border: 1px solid; cellspacing: 0;  width: 100%; height: auto; text-align: center;">
            <strong>Copyright &copy 2011 Frost Miller Group </strong>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
            <center>
            <a href="#">Contact Us</a>
            &nbsp;
            <a href="#">Terms of Use</a>
            &nbsp;
            <a href="#">Trademarks</a>
            &nbsp;
            <a href="#">Privacy Statement</a>
            &nbsp;
            <a href="#">Site Feedback</a>
            </center>
        </td>
    </tr>
    </table>
</body>
</html>

Outlookで正しく表示するには、どのような変更を加える必要がありますか？

htmlcssoutlook
30
user544079

specificヘルプを提供できるようにするには、特定の部分を説明する必要がありますspecifically "get messed up"、またはスクリーンショットを提供します。また、問題が発生したOutlookのバージョンを知ることも役立ちます。

いずれにせよ、 CampaignMonitor.comのCSSガイド は、メールクライアントの不整合のデバッグに役立つことがよくあります。

このガイドから、いくつかのことがうまくいかないか、Outlookでまったく機能しないことがわかります、より重要なもののいくつかのハイライトがあります：

  • さまざまなタイプのより洗練されたセレクターE:first-child、E:hover、E > F（子コンビネータ）、E + F（隣接する兄弟コンビネータ）、E ~ F（一般的な兄弟コンビネーター）。残念ながら、これはインラインスタイルなどの回避策に頼ることを意味します。
  • 一部のフォントプロパティ、たとえばwhite-spaceは機能しません。
  • background-imageプロパティは機能しません。
  • Box Modelプロパティにはいくつかの問題があります。最も重要なのは、height、width、およびmax-バージョンは使用できないか、特定の要素にバグがあります。
  • ポジショニングとディスプレイの問題（例：display、floats、positionはすべて除外されています）。

要するに：CSSとOutlookを組み合わせるのは苦痛です。多くのい回避策を使用する準備をしてください。

PS。特定のケースでは、HTMLに2つの小さな問題があり、奇妙な動作を引き起こす可能性があります。 「align=top "おそらくvertical-align。また：cell-padding for tdsは存在しません。

44
Jeroen

Cssとhtmlに関してOutlookがサポートするものについては、MSDNを必ずチェックしてください。リンクはこちら： http://msdn.Microsoft.com/en-us/library/aa338201（v = office.12）.aspx 2007年以前のエディションとの間に大きな違いがあるため、少なくともOffice 2007がない場合は、本当にアップグレードする必要があります。また、結果の電子メールをファイルに保存し、firefoxで調べてみてください。Outlookによって変更されている内容が表示され、より具体的な質問があります。 Wordを使用して、電子メールを一種のプレビューとして表示することもできます（ただし、どのスタイルが適用されているか/適用されていないかについての情報は取得できません）。

15
scrappedcola

メールテンプレートでVML（Vector Markup Language）ベースのフォーマットを使用しました。 VMLベースでは、コメント内にコードを記述しました。このサイトの助けを借りました。

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable

1
Arsh Khan