メーラバグについて
この頃はメールコーディングを中心にお仕事をしているのですが、とにかくバグが多い。
ブラウザでうまく表示されていても、メール配信テストをしてみると崩れているということは日常茶飯事。地道に一つずつ検証を重ねることで、メーラーでのレイアウト崩れを解消するナレッジが少し溜まってきたので、こちらにまとめておこうと思います。
検証メーラー
- Outlook365（ブラウザでなくアプリケーション版のOutlookメール）←バグ多し
- Yahoo!メール
- iPhone、Androidの標準メーラー
※Gmailは割と優秀
バグと対処法
Outlook365
行の高さがline-heightで設定している値よりも大きくなる
<発生原因>
outlook特有のバグ。
<回避方法>
line-heightとセットにして
mso-line-height-rule:exactly;
をCSSスタイルに設定する。
文字の上部が切れて表示される
＜発生原因＞
outlook特有のバグ。line-heightの値がテキストサイズ以下だとテキストの上部が見切れる。
＜回避方法＞
line-heightの値をfont-sizeよりも最低2px大きい値にする。
中央と右寄せのa要素がリンクの範囲外でもクリックできてしまう
＜発生原因＞
outlook特有のバグ。リンクエリア外を押しても遷移してしまう。
＜回避方法＞
aタグの前に を入れる。
Yahoo!メール
Yahooメールでstyle内のheightがmin-heightに書き換えられてしまう
＜発生原因＞
Yahooメールの仕様と思われる。max-heightなどの記述は書き換えられない。
＜回避方法＞
styleでheight指定をせず、HTML属性のheightで指定すること。
○良い例
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="3" > </td>
</tr>
</table>
☓悪い例
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:3px;"> </td>
</tr>
</table>
iOSメール
iOS標準メールアプリなど、本文に自動でリンクが貼られる
＜発生原因＞
iOSなど端末の仕様。
本文中の日時などを検知し、カレンダー登録などができるように自動でリンクタグが貼られる。
（自動で<a>タグが挿入されている…驚き）
＜回避方法＞
CSSスタイル追加
以下を<head>でスタイル記述し、該当箇所にクラス付与する。
.link_disable a {
color: inherit;
text-decoration: none;
pointer-events: none;
}
その他
長いURLやテキストを入れると画面幅が広がってしまう
＜発生原因＞
英数字の途中で自動改行が起こらないため、画面幅が広がる。
＜回避方法＞
該当箇所に以下の折返しスタイルを記述する。
<span style="word-wrap:break-word; word-break:break-all;">該当するURL・テキスト</span>