0

私は、電子メールニュースレターのデザインとコーディングであるブライヤーパッチをナビゲートしてきました。1つの問題が発生し続けています。私の見出しの行の高さが、異なる電子メールクライアント間で一貫していないということです。

GmailやiPhoneなど、1つのセットで見出しに多くのスペースが与えられます。 Gmailのニュースレター

もう1つのグループ、主にOutlookは、見出しの余裕を大幅に減らします。 ここに画像の説明を入力してください

私のコードは次のとおりです。

<table width="540" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-top-orange.gif" width="270" height="7" style="display:block;"></td>
    <td rowspan="3" width="270" height="199"><img editable width="270" height="199" style="display:block;"></td>
</tr>
<tr bgcolor="#f68b1f" >
    <td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
    <td width="15" height="185" bgcolor="#f68b1f"></td>
    <td width="223" height="185" bgcolor="#f68b1f" align="left" valign="top"><a name="item2" style="text-decoration: none;"><h2 style="font-family: Arial, Verdana, sans-serif; font-size: 15px; color: white !important; color:white;"><singleline label="Title" repeatertitle="true" style="color: white;">Lorem ipsum</singleline></h2></a><multiline><p style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: white;">Lorem ipsum dolor sit amet</p></multiline></td>
    <td width="15" height="185" bgcolor="#f68b1f"></td>
    <td width="7" height="185"><img src="img/shading-right-small.gif" width="7" height="185" style="display: block;"></td>
</tr>
<tr>
    <td colspan="5" width="270" height="7" style="line-height: 7px;"><img src="img/shading-bottom-orange.gif" width="270" height="7" style="display:block;"></td>
</tr>

newletterアプリケーションで必要に応じてテキストを入力します。

すべての（またはほとんどの）クライアントがGmailのようにタイトルをレンダリングするように、この部分をどのようにコーディングできますか？見出しだけにネストされたテーブルを追加したり、上部の境界線をオレンジ色にしたりするなど、さまざまなことを試しました。これらの修正はGmailのレンダリングにも影響しますが、それは私が望んでいることではありません。

4

1 に答える 1

1

line-heightご覧のとおり、クライアント間のサポートはかなり悪く、一貫性がないため、HTMLメールに依存することは望ましくありません。これを実行する方法は、残念ながら、コードをリファクタリングして、いくつかのコードをネストすることtablesです。

このフィドルをここでチェックしてください。ここでは、基本的に、2番目tableのa内に別のフィドルをネストしました。このテーブルには、特定の高さになり、見出しの上にパディングを作成することが唯一の仕事である全体が含まれています。tdtrtd

<tr bgcolor="#f68b1f" >
    <td width="10" height="185"><img src="img/shading-left-large.gif" width="10" height="185" style="display:block;"></td>
    <td colspan="3">  
        <table> <!--the new nested table-->
            <tr>
                <td bgcolor="#f68b1f" colspan="3" height="15"></td>
            </tr>

残念ながら、HTMLメールの世界では、のような実際のCSSではなく、これらの種類のテーブルベースのレイアウトハックに依存する必要がありますline-height。

于 2012-10-04T14:12:54.340 に答える