24

メール クライアントでスタイル<hr/>が実線のみに戻ってしまうという問題があります。

以下は私のマークアップです。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>

私は Campaign Monitor を見てきましたが、そこに導くものは特にありません。

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

4

5 に答える 5

28

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

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は、レンダリング エンジンが空のセルを認識しない場合に備えてあります。

于 2012-04-18T09:26:52.950 に答える
18

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

<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ようです。

kolinborder-bottom 's answer に記載されているロングハンドバージョンが Outlook にない場合、ショートハンドは正常に機能するようです。

編集:私が以前に使用し、少なくとも Outlook で動作することがわかったもの (他のクライアントでそれをテストできる人がいればいいでしょう) は、<hr>ベースのアプローチです。

<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;">
于 2015-03-18T09:31:03.670 に答える
3

次の例を使用できます。

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

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

于 2014-11-14T05:03:17.620 に答える
3

かなり洗練されておらず、既知の固定幅でしか役に立ちませんが、これらは HTML メールのフォーマットを修正しようとしたときに訪れた恐怖であることがわかりました。

<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
于 2012-04-19T07:57:29.763 に答える
0

font-size を宣言する必要があります。そうしないと、" " が高さを台無しにします。

 <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> 
于 2016-11-16T16:18:25.113 に答える