マーケティングブログ
突然ボーダーが見えなくなった！
以前、特定のメーラーでのみボーダーが見えなくなったことがあったっぴ。
ボーダー?
そうっぴ。そこには高さ1pxの画像があったのだけど、それがつぶれて白い線状で表示されたっぴね。
こんな感じに表示するはずが…。
このようになってしまったっぴ。…わかるっぴ？
はい、線が消えてますね！
ちなみにこの画像の構成はこんな感じっぴ。消えた部分は⑤と⑧の高さ1pxの画像っぴ。
高さ1pxだけの画像をわざわざ入れていたんですね…？
流し込みのテキストで表現したい箇所があったから、確かに少し特殊な構成、………ぴ。
確かに特殊というか、ややこしい構造…？それでこの崩れた時はどうしたんですか？
結果からいうと、追加のタグを入れることでその時は表示されるようになったっぴ。ただその約一年後にもう一度修正が入ったっぴ。
細かい経緯は覚えていないけど、改めて検証したら1回目の修正内容だとボーダーが表示されなかったっぴ。
だからたぶん、アップデートか何かで再び崩れが生じて、対応したんだったと思うっぴ。
<tr>
<td><div style="margin: 0 auto;line-height:0;">
<img src="https://dir.directus.jp/mailmagazine/kensho/blog/images/img_05.gif" width="650" height="1" style="display: block;"></div>
<td>
<tr>
<tr>
<td style="font-size:0;line-height:0;" height="1">
<img src="https://dir.directus.jp/mailmagazine/kensho/blog/images/img_05.gif" width="650" height="1" style="display: block;">
<td>
<tr>
<tr>
<td style="font-size: 0;line-height:0;mso-line-height-rule:exactly; mso-line-height-alt:1px; " height="1">
<img src="https://dir.directus.jp/mailmagazine/kensho/blog/images/img_05.gif" width="650" height="1" style="display: block;">
<td>
<tr>
やはり、こまめな検証は必須
こんな感じで、今までは問題なかった記述でも、崩れが発生する可能性があるっぴね。
は～成る程。………やはりこまめな検証は必要なんですね。
ぴ。
ちなみに二回目の修正で追加した「mso-line-height-rule:exactly; mso-line-height-alt:1px;」というタグは、Outlookメール用のタグっぴ。
Outlookのレイアウト表示は、「line-height: 0;」 を “行ボックスが0” と解釈して描画を省いてしまうので、これを入れることでOutlookメールでも1pxの高さを確保できるようにしてるっぴ。
特にOutlookは特有の問題があるぴ、注意が必要っぴね。
特有？
……まあ、詳しくはまた次回…以降か………いずれっぴ(たぶん)。
