みなさんこんにちは！
メーリングリストのレイアウトの作業を続けていると、新しいバグに出くわすことがあります。これについては、このトピックで実際に話したいと思います。 過去の記事のリストを提供しなければ、多くは得られませんが、それでも注目に値します。 いくつかの楽しい瞬間もあります。
セル間隔
1 年以上前に書いたように、テーブルのすべてのインデントをゼロにする価値があり、インデントが必要な場合は、透明な.gifスペーサーを使用して新しいセルを追加します。 タスクを簡素化し、テーブルの基本的なインデントで遊ぶことにしました。
タスク：各行に2つずつ、4つの写真を表に配置します。 写真の間に10pxのギャップが必要です。
実験的ソリューション：
<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
結論：失敗！ gmailとYandex.mail（他の人はチェックしませんでした）では、インデントはサイコパスのように動作します。 どこでも、さまざまな方法で。
実用的なソリューション：
<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td></td> <td> </td> <td></td> <td> </td> </tr> <tr> <td> </td> <td></td> <td> </td> <td></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> </tr> </table>
注：空のセルの幅と高さを設定する必要はありません-.gifスペーサーと幅と高さのあるセルのおかげで、セルは自動的に調整されます。 もちろん、写真については多くのことを尋ねる必要がありますが、この例ではこれを省略しました。 要点ではありません。 必要なものはすべて前のトピックにあります。
注2：写真にdisplay：blockプロパティが設定されているため、写真の下に余分なインデントが表示されません。 また、画像ラッパーで処理されます
<div style="line-height:0;"></div>
ただし、このオプションは常に適しているとは限りません。 なんで？ これはmail.ruの障害です。 しかし、それについては後で。
セルパディング
そして、ここで良いニュースが待っています。 不要なストラットを作成できず、インデントに従来のセルパディングを使用できない場合があります。バグは確認されていません。 前のタスクの原則に従った動作例：
<table cellpadding="10" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
前のタスクでこのオプションを使用しなかったのはなぜですか？ すべてがシンプルです。 セルパディングは、テーブルの外側部分に相対的な二重のインデントを提供します。
Mail.ruとありふれた問題
みんなは間違いなく素晴らしいです。 メールインターフェイスを書き直しただけでなく、UTFのエンコーディングを上書きしました。 そして、KOI-8でダウン！ しかし、ここでは問題がなかったわけではありません。 以前はなかった小さなバグがありました。
タスク：画像（または画像とのリンク）を画像よりも広いセルに配置します。 画像を中央に配置します。 セルの下の境界線と画像自体の間の小さなインデントを防ぎます。
以前は次のように解決されました。
<table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table>
このようにしてみました：
<table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0; text-align:center;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table>
動作しません。
画像を中央に配置する必要がない場合は、さらに簡単です。
<table width="200" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <img src="1450823215153325277735" width="200" height="100" alt="" style="display:block;"/> </td> </tr> </table>
以前は、最初のオプションはどこでも機能していました。 現在、mail.ruメールを除くすべての場所で機能します。 このトピックについて、mail.ruのクライアントパートの開発マネージャーであるAndrei Suminと連絡を取り、アライメントにはcenterタグを使用することを推奨しました。 これまでのところ、すべてのクライアントでこのメソッドをテストする時間はありませんでしたが、このオプションを上記と同時に使用することを妨げるものはありません。 Andreiはまた、パーサーはレイアウトでcssを非常によく食べると言いましたが、恐れることはありません。 私が説明したすべてのテクニックは機能します。
「Gifが邪悪なことをする！」 あなたはスパムに巻き込まれるでしょう！」-これはそうではありません。
.gifストラットの使用は、Gmailであまり認識されていないという会話が何度もありました。 伝えられるところでは、彼はこれをスパム行為と考えています。 Rednaxi同志もこの議論で、Google の公式勧告からの抜粋を引用して話しました。
一部の送信者は、受信者がメッセージを開いたときに通知するために、メッセージに空白の追跡ピクセルを挿入します。 次の2つの理由により、このようなピクセルをメッセージに含めることを強くお勧めします。 まず、Gmailではデフォルトで画像が表示されないため、ユーザーがメッセージを読んだことをトラッキングピクセルが確実に通知することはできません。 第二に、トラッキングピクセルはスパマーによってよく使用されるため、それらを使用してメッセージをスパムに送信できます。
しかし、300,000人以上の受信者を対象に電子メールキャンペーンを実施しているため、これらの最も透明な.gifを使用してもスパムの問題はありませんでした。 それらに関する唯一のコメントは、BATの古いバージョンです！ カラー透明ピクセルは黒。 このメールクライアントについて気にしない場合は、gifが適切な色で挿入され、背景とマージされます。
まあ、そのようなダンス以来
この機会に、レイアウトに関係しない別の楽しい現象に注目してください。 ニュースレターの購読解除のトピックは完全に吸い込まれ、最終的には機能します！ 少なくとも私はそれを見ます。 より具体的には、私はさまざまなサイトやサービスに頻繁に登録し、メールボックスにあらゆる種類のメールを常に収集しています。 そのため、以前にサイトの半分を購読解除するために追加の認証が必要だった場合、今では本当に珍しいです！ いずれにせよ、私が購読しているサイトでは、それらのいくつかはありません。 Molotok.ruは、オーケストラの音に不自由な雌馬としてリリースされます。 このRunetの作成には、登録解除の承認が必要です。 しかし、彼は今から1年間スパムにさらされています。
UPD：2012年2月1日、背景画像がGmailでサポートされるようになりました。 今年の2月1日から、gmailでbackground-imageプロパティのサポートが登場しました。 やった！