メールの HTML テンプレートを作成していて、Gmail アカウントにテストを送信しました。<td>
すべての要素の幅を指定<td>
し、行内のすべての幅が合計されてテーブルの幅が正確になるようにしました。しかし、gmail は常に、指定した幅に対して 10 進数を追加または削除するように思われtd
ます。その結果、表の幅と全体のtd
幅が少し一致しなくなります。そして、この不一致は、テーブルの境界線とtd
行の最後の境界線との間に小さなギャップを示します。これは、私にとっては厄介なことです。この問題を解決する方法を知っている人はいますか?
実際、この不一致は gmail でのみ発生します。Hotmail と yahoo にはこの問題はありません。
コードは次のとおりです:(いくつかの漢字が含まれていますが、無視してかまいません)
<table width="650" cellpadding="0" cellspacing="0" style="border: 10px solid black;">
<tr>
<td style="width: 18px; font-size: 30px; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
<td width="297" style="vertical-align: top;">
<table width='297' cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="175" style="width: 297px; height: 175px; line-height: 175px; max-height: 175px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
让<span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; font-weight: bold;">Bomoda</span>
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
</td>
</tr>
<tr>
<td colspan="2" height="31" style="width: 297px; height: 31px; line-height: 31px; max-height: 31px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; color: #000001; text-align: left; line-height: normal;">
<a href="http://www.bomoda.com" target="_blank" style="text-decoration: none;"><span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; ">Bomoda</span></a>Newsletter
</td>
</tr>
<tr>
<td colspan="2" height="36" style="width: 297px; height: 36px; line-height: 36px; max-height: 36px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td width="116">
<a href="http://www.bomoda.com" target="_blank" style="display: block; text-decoration: none;">
<img border="0" src="http://m.bomoda.com/static/img/email/retention_email/button.jpg" alt="" style="display: block; width: 116px; height: 27px;" />
</a>
</td>
<td width="181">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="315">
<img border="0" alt="Bomoda" style="display: block; width: 315px; height: 458px;" src="http://m.bomoda.com/static/img/email/retention_email/A.jpg" />
</td>
</tr>
</table>
ご覧のとおり、幅 650 のテーブルには 3 つの行が 1 行しかありませんtd
。それらの幅はそれぞれ 18、297、および 315 であり、合計で 630 に相当します (表の左右に 10 幅の境界線があることを考慮すると)。しかし、クロムで開発者ツールを使用して各の幅を確認すると、それぞれtd
の計算された幅がそれぞれtd
17.27272605895996、296.3636169433594、および 315.45452880859375 であり、合計すると 630 になりません。そして一番右の写真。