web-dev-qa-db-ja.com

HTMLメール<hr />スタイルの問題

電子メールクライアントでスタイル設定を元に戻す際に問題があります<hr/>を実線のみの1つに変更します。

以下は私のマークアップです。ChromeおよびIEで問題なく表示されますが、Outlookは常に点線を実線に戻します。

<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>

私はキャンペーンモニターを見てきましたが、そこをガイドするために特に何もありません。

すべての回答に感謝します。

htmlemailoutlookstyles
20
El Toro Bauldo

OutlookがHTMLエンジンではなくMicrosoft Wordレンダリングエンジンを使用していて、mswordのようにhrタグが実線に戻されるためだと思います。

おそらく、hrタグを使用する代わりに、全幅のtable-> cellまたはdivとスタイルを使用してみます。

<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;">&nbsp;</td>
</tr>
</table>

nbspは、レンダリングエンジンが空のセルを認識しない場合のためにあります。

21
kolin

他の回答に基づいて、これが最もうまく機能することがわかりました：

<table border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;">&nbsp;</td>
  </tr>
</table>
<br>

幅はtableで％または必要に応じて（- https://www.campaignmonitor.com/resources/will-it-work/guidelines/ のように）設定する必要があるようです可能であればpxのtdに.

border-bottomショートハンドは正常に動作するようです。kolinの回答で述べたlonghandバージョンはOutlookにはありません。

編集：私が以前に使用し、少なくともOutlookで機能していることがわかったもの（他のクライアントでそれをテストできる人がいればいいでしょう）は<hr>basedアプローチ。

<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
12
marc82ch

次の例を使用できます。

<div style="border-top: 1px dotted #999999;">&nbsp;</div>

残念ながら白い背景に対してのみ機能します

3
CodeGems

どちらかと言えば洗練されておらず、既知の固定幅に対してのみ有用ですが、これらはHTMLメールのフォーマットを修正しようとしたときに発生する恐怖であることがわかりました。

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
3
El Toro Bauldo

フォントサイズを宣言する必要があります。そうしないと、「」が高さを台無しにします。

 <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr>
0
Brian Miller