‼️ 🥐 🤒 メーリングリストのレイアウトの松葉杖 📜 🚴🏻 🛀🏿

Hi％username％！

ニュースレターのレイアウトに関するこれまでのトピックが役立ったことを嬉しく思います。正しい場合は、レイアウト中の松葉杖についても話したいと思います。これは、 Unisenderの同僚と共同で特定したものです。また、このトピックが郵便物のレイアウトの松葉杖メーカーのチートシートになるという簡単な理由で、私は数回繰り返すことを許可します。猫の下にようこそ。

ニュースレターのトピックですでに受け入れられているように、私は何かを見逃した人のために参考文献を提供します：

Gmail

前述のように、Gmailパーサーには画像リンクに下線を引く機能があります。リンクの装飾をキャンセルするだけで処理されます。

<a href="" style="text-decoration:none;" target="_blank"><img src="__" border="0" width="" height="" alt=""/></a>

Mail.ruメール

非常に奇妙なバグですが、あるべき場所があります。この原則に従って、ブロック内でBRタグを複製します。構造がある場合：

 <span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet</span>

パーサーは次のように解釈します：

 <span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet[br/][br/][br/]</span>

さて、これを次のように扱います。

 <div><span style="font-family:Arial; font-size:12px; color:#666666;">Lorem</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">ipsum</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">dolor</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">sit amet</span></div>

この場合、ダビングは行われず、各行を個別のブロックに配置して行の折り返しを実行します。

注：コードでは、Habraparserがこれらのタグを食べるため、BRタグのブラケットを置き換えました。

Yahooメール

このメーラーは、mail.ruよりもさらに神秘的です。パーサーは、未知の原則により、レター内のいくつかのリンクを選択し、以下から変換します。

 <a href="" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;"></a>

ここにあります：

 <a href="" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;"><span class="yshortcuts"></span></a>

これは、リンクがインラインマージではなく、spanタグのyshortcutsクラスのスタイルによって形成されるという事実につながります。解決策は簡単です-頭のスタイルをレンダリングするためのルールを破ることができます。ドキュメントヘッダーで、yshortcutsクラスを宣言し、そこでリンクスタイルを複製します。特に注意していない場合、繰り返しますが、クラスはリンク自体ではなく、spanタグに割り当てられます。

Yandexメール

問題は、すべてのホバーリンクが赤に変わることです。おそらく-Yandexのコーポレートアイデンティティ。頭の中のスタイルは問題を解決しません。松葉杖は見つかりませんでしたが、ソリューションを共有してくれる人に感謝します。

また、コメントの中で、ユーザーノートは問題に対する実際に有効なソリューションを示しています。

Outlook Express

これについても書きましたが、セル間のインデントを取り除くためにテーブルを折りたたむ必要があることを繰り返します。これは、豊富な色やグラフィックの文字の外観に悪影響を与える可能性があります。設計はシンプルです：

 <table style="border-collapse:collapse;">...</table>

バット！

個人的には知りませんでしたが、古いバージョンのBatには透明な.gifファイルがないという情報をよく耳にしました。むしろ、透明なピクセルの上に単に黒でペイントします。問題の解決策-透明ピクセルを背景色に置き換えるgifの使用。同じことは、単一ピクセルの.gifスペーサーにも当てはまります-透明ではなく、ドキュメントに挿入される場所の背景色になります。

形式が違います

画像の幅と高さを指定しない場合、ユーザーはロードされていない画像にalt'ovを表示しません。さらに、設定された画像サイズに準拠しても、画像をオフにしてもレイアウトが崩れることはありません。

まとめ

一方で、松葉杖は激怒することもありますが、他方ではあまり多くありません。また、メーリングリストのレイアウトで上記のすべてを観察することはそれほど難しくありません。ご清聴ありがとうございました！

メーリングリストのレイアウトの松葉杖