web-dev-qa-db-ja.com

HTML 2010のOutlook 2010で行の高さが機能しない

Outlook 2010/Outlook 2007は、HTMLメールの行の高さをまったく尊重していないようです。 （Outlook 00およびOutlook 03で完全に動作します）

私はいくつかの大規模なグーグルを行ってきました-そして、HTML CSSサポートチャートは、Outlook 2010/2007が行の高さを理解すべきであるとわかりました。

ブロックの親要素、子の段落要素、およびヘッドのスタイルタグのID、および上記のすべての組み合わせにline-heightを配置しようとしました。

また、行の高さをテキストサイズよりも大幅に大きいピクセル値として明示的に宣言していることも確認しました（ただし、％とemも試しました）。 ！importantを宣言に入れようとしました-そして、オンラインで見つけることができる他のすべてのヒントと一緒にvalignを試してみました....ボタンのpadding-topとpadding-bottomを決定します。HTML電子メールのpadding/marginのサポートは非​​常にバグがあるためです。

これに関する助けを本当に感謝します。本当に頭を打つ時点で！

実際の電子メールは複雑なニュースレターなので巨大ですが、ここではスタイルのスニペットと、行の高さが機能しないテーブルセクションがあります-これで十分です！

<style type="text/css" media="screen">
    html {
        -webkit-text-size-adjust:none;
        -webkit-background-size:100%;
    }
    body{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        background-color:#e5e5e5;
    }
    p{
        margin: 0px 0px 0px 0px !important;
        padding: 0px 0px 0px 0px !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
        display:block;
    }
    a:link, a:visited, a:active{
        color:#55c2d9;
        text-decoration: underline;
    }
    a:hover{ 
        text-decoration: underline; 
    }
    .body a:link, a:visited, a:active{
        color:#55c2d9;
    }
    img{
        border: 0;
        display: block;
    }
    table.main {
        background-color: #ffffff;
        width:650px;
    }
    td {

    }
    #header-top p{
        line-height:33px;
    }

</style>

                    <!-- Content -->
                    <table border="0" cellspacing="0" cellpadding="0" class="body">
                        <!-- Row 1 -->
                        <tr valign="top">
                            <td background="images/bg-texture-top.jpg" style="background-repeat:repeat-y; background-color:#262626;" valign="top" width="650" height="33" bgcolor="#262626">

                                <table border="0" cellspacing="0" cellpadding="0" id="header-top">

                                    <!-- Row 1.1 -->
                                    <tr valign="top">
                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>

                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="490" height="33" bgcolor="">
                                            <p><a href="#">click here to view this email in a browser</a></p>
                                        </td>
                                        <td style="font-family: Helvetica, Arial, sans-serif; color:#767676; font-weight: bold; font-size:11px; line-height:33px; text-align:left; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;" width="62" height="33" bgcolor="">
                                            <p>find us on:</p>
                                        </td>

                                        <td style="" valign="top" width="16" height="" bgcolor="">
                                        </td>
                                    </tr>

                                </table>

                            </td>
                        </tr>

                    </table> <!-- Content -->
htmlemailoutlookcss
27
Lauren

インラインCSSの組み合わせを使用して、行の高さを制御します。

<p style="padding:0px;margin:0px;margin-auto:0px;mso-line-height-rule: exactly;line-height:110%;font-size:11pt;">paragraph text</p>

重要な要素は、Microsoft独自のCSS属性、mso-line-height-rule: exactly;。パディングは、段落タグが不要なスペースを作成するのを防ぐだけです。

39
Wes

Outlookは、パーセント単位で指定された行の高さをサポートしています。たとえば、line-height：1.1はサポートされていませんが、line-height：110％はサポートされています。

19
Radu Damian

遅い対応ですが、最近Outlookで同様の行の高さの問題に取り組んだため、ハッキングの回避策を共有したいと思いました。

何らかの理由で、行の高さを指定したタグのCLOSINGタグの直前に、順序付けられていないリストをHTMLにスローすると、Outlook 2010は行の高さを尊重します。

順序付けられていないリストを空にして非表示にすることができます。

<ul style="list-style-type: none; visibility:hidden;"></ul>

例：

<p style="font-size: 12px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul style="list-style-type: none; visibility:hidden;"></ul>
</p>

免責事項：これを徹底的にテストしたことはありません。私のテンプレートでは、1つのESP Outlook 2010、Gmailの現在のバージョン（2012年7月27日）、およびiPhoneメールアプリを介して機能します。他のタグの問題も修正しますが、これは見苦しい修正ですが、HTML仕様に対するOutlookの目立たない無視の場合によくあるように、修正は問題と同じくらい愚かなことがよくあります。ただし、実際の受信者に送信する前に広範囲にテストしてください。

11
Steve H

Outlookは、htmlのレンダリングと編集にWord htmlプロセッサを使用します。テーブルレイアウトに慣れて、CSSを忘れ、そして-インラインCSSのみを使用します。背景、フォントファミリ、font.size、色など、いくつかの可能性があります。

サポートされているcssの完全なリストは here にあり、チュートリアルは here です。

ただし、受信者についても考慮する必要があります-受信者がGoogleメールまたはYohooメールの場合、CSSを完全に削除できます

メールニュースレターを開発するための優れたリソースは、campaignmonitor.com/resourcesです。また、すべてのメールサービスとそのHTML/CSS機能を繰り返しチェックしています。

3
Thomas Fellinger

Outlookでline-heightが機能するには、「mso-line-height-rule：exact;」を追加した後行の高さの前に、10進値の代わりにパーセンテージを使用してください（つまり、1.5ではなく150％）

3
Medhat

line-heightテーブルセルでインラインcssを使用しても問題ありませんが、実際にはそれらは必要ありません<p>タグは、フォーマットの問題とそれらへの参照を導入するだけです<p>タグの<style>タグの<head>は、多くのクライアントによって無視されます。

1
Raoul Duke

この問題の最良のアプローチは、相対的な位置と最上位のプロパティを使用することです。これは魅力のように機能します。以下のコード例を参照してください

<div style="display: inline-block; ">
<font>Line 1</font><br/>
<font style="position: relative; top: -5px;">Line 2</font><br/>
<font style="position: relative; top: -10px;">Line 3</font><br/>
</div>
0
user628176