web-dev-qa-db-ja.com

Outlookのテキストは行の高さを使用しません

Htmlを使用して電子メールを作成していますが、Outlook2010で問題が発生しました。コードは次のとおりです。

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->
        <p style="margin:0;padding:0;font-family:'Courier New',Courier,monospace;
        font-size:14px;font-weight:bold;color:#000000;line-height:15px;">
            #TEXT
        </p>
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>

今、テキストから行の高さを変更したいのですが、pタグで変更しても変更されませんが、tdやMSOの例外に配置しても、うまくいきません。 Outlook用。これを機能させる方法はありますか、またはOutlookの回避策を知っている人はいますか？

cssoutlookhtml-email
7
Niqql

Msoスタイル「mso-line-height-rule」を使用する必要があります。これは、Outlookに行の高さの規則を尊重させるために使用されます。これは、宣言された行の高さの前に追加する必要があることに注意してください。そうしないと、機能しません。下記参照：

<td background="images/11-text-1--alpha-d3c29e.jpg" 
bgcolor="#d3c29e" width="514" height="460"  valign="top" style="margin:0;padding:0;font-family:'Courier New',Courier,monospace; font-size:14px;font-weight:bold;color:#000000;mso-line-height-rule:exactly; line-height:15px;">        
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false" 
    style="width:514px;height:460px;">
    <v:fill type="tile" src="images/11-text-1--alpha-d3c29e.jpg" color="d3c29e" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->   
            #TEXT
    <!--[if gte mso 9]>     </v:textbox>   </v:rect>   <![endif]-->
</td>
10
Gortonington

まず第一に、スタイリング「p」タグは古く、一部のメールクライアント（Outlookなど）はそれを拒否します。私は以前にそのような問題に遭遇しました。

私がお勧めするのは、主に「td」タグのスタイルを設定することです。この特定のセクションに他のテキストがある場合は、「span」タグを挿入してから、スタイルを設定します（ただし、「td」タグでスタイル設定したものを上書きしないようにしてください。

下に例があります：

<td style="background-color: #2e3242;color:#ffffff; padding: 10px 0;
border-radius: 5px; font-size:15px; font-family: 'Trebuchet MS', sans-serif;
 line-height: 20px; text-align: center;width:28%; vertical-align: middle">
                                    Lorem Ipsum</td>

そしてここにスパンがあります

<td width="548" style="color:#a8796b; font-size:14px; font-family: 'Trebuchet MS', 
sans-serif; line-height: 18px; text-align: center; 
width:548px; vertical-align: middle">
<span style="font-family: 'Trebuchet MS', sans-serif; font-weight: 300;
font-size: 16px;line-height: 30px;color:#a8796b">
Lorem Ipsum </span><br>
                                    Best Regards,<br>Lorem Ipsum
                                </td>
1
Pravissimo