2

空のアンカー要素のみを含み、背景色を持つ単一の列を持つテーブル行を使用してみました。これは一部のクライアントで機能しますが、ほとんどとは言えません。また、列と行の境界線を設定しようとしましたが、これも非常に複雑な結果になります。別のオプションは、画像を使用することです...

これを行うための確かなテクニックはありますか？私は電子メールのデザインにかなり慣れていません。

4

4 に答える 4

4

いくつかの方法があります。段落の下に水平の「罫線」が必要な場合は、段落幅全体で次のいずれかを実行できます。

<td bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc;">My text plus at least two break tags for padding <br /><br /></td>

または

<tr>
<td bgcolor="#FFFFFF" style="Verdana;">Some content text here with no break tag after it.</td>
</tr>
<tr>
<td height="1" bgcolor="#ffffff" style="border:none; border-bottom: 1px solid #cccccc; font-size:1px; line-height:1px;">&nbsp;</td></tr>

2 番目の方法では、使用されている電子メール クライアントとレンダリング方法に応じて、レイアウトに 2 つのピクセルが追加される場合があります。ただし、高さを設定してテキストの下に「パディング」を比喩的に追加できるため、はるかに信頼性が高くなります。(パディングは、すべての電子メール クライアントで一方的に同じように機能するわけではありません)。

より複雑な「パディング」オプションについてはborder-bottom、囲み<td>に を追加してから、追加の「パディング」列でテーブルをネストすることをお勧めします * Outlook ハックのfont-size:1px; line-height:1px;"プラスを使用します。&nbsp;

于 2013-03-20T12:46:27.283 に答える
0

希望する色の 1 ピクセルの境界線を持つテーブル セルは、レンダリングする最も信頼できる方法です。

<table width="100%" align="left" border="0" cellpadding="0" cellspacing="0" style="margin:0;padding:0;">
<tr>
<td style="border-bottom:1px solid #ffffff;">
Content Here
</td>
</tr>
</table>

関連して、すべての電子メール クライアントの画像で境界線が機能しないことがわかりました。

于 2013-03-20T12:45:11.310 に答える
0

メールに仕切りが必要な場合は</hr>、タグを使用して水平方向の罫線を使用します。

于 2013-03-20T12:03:18.890 に答える
0

分割線の太さがわずか数ピクセルであると仮定すると、通常は 10px x 40px の画像を使用し、分割線を垂直方向に中央に配置します (ただし、技術的には 1px x 40px が機能します)。次に、画像を表のセルの幅いっぱいに広げます。

背が高いのは、画像をパディングにも使用しているためです。画像の幅が 10 ピクセル未満であるため、余分な「不要な」ピクセルはそれほど問題ではありません。

利点は、この手法を使用すると、前後の垂直方向のパディングを正確に制御できることです。また、19px の高さであると思われる Outlook のセルの最小高さの問題も回避できます...

于 2013-03-20T12:57:02.990 に答える