GmailモバイルでHTMLのメールテキストが正しく表示されない

最終的に、私のメールがすべてのクライアントで素晴らしいと思われる時点です... Gmail Mobileを除きます。具体的には、ナビゲーションバーのリンクとフッターバーのリンク（テーブル）は、中央に配置するのではなく、左に押しています。GmailモバイルでHTMLのメールテキストが正しく表示されない

アドバイスはありますか？

ナビゲーションバーコード：

<td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES 
 
           </a></td> 
 
          <td width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES 
 
           </a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td> 
 
          <td class="ecxh" width="0"> 
 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
           <tbody> 
 
            <tr> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </tbody> 
 
         </table> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table>

そして、私のフッターには、テキストの代わりに画像リンクを使用することを除いて、これに似ています。

出典

2016-07-03 S. White

コードを確認した後、align="center"属性を使用してテーブルを中央に配置したようです。 HTML属性の代わりにCSSを使用することをお勧めします。 margin:0 auto; CSSプロパティを使用して、親コンテナ内のテーブルの中央に配置することができます。

以下の更新されたコードを参照してください：

<table class="ecxw320" align="center" border="0" cellpadding="0" cellspacing="0" width="640"> 
 
    <tbody> 
 
    <tr bgcolor="#000000"> 
 
     <td height="50"> 
 
     <!--Use margin:0 auto; to center a table within it's parent container--> 
 
     <table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0"> 
 
      <tbody> 
 
      <tr> 
 
       <td> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0"> 
 
        <tbody> 
 
        <tr> 
 
         <td width="20"> 
 

 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 

 
       <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TEES 
 
           </a> 
 
       </td> 
 
       <td width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TANKS</a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">ACCESSORIES 
 
           </a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
       <td class="ecxh" style="font-family:'Helvetica', 
 
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica', 
 
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">SALE</a> 
 
       </td> 
 
       <td class="ecxh" width="0"> 
 
       <table align="center" border="0" cellpadding="0" cellspacing="0" width="20"> 
 
        <tbody> 
 
        <tr> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2016-07-03 08:48:16

謝罪を、私は私の質問に完全なコードを含んでいませんでした、また私は、現在の効果のスクリーンショットが含まれませんでした。完全なコードは次のとおりです。[link]（http://paste.ofcode.org/JQS3ykcP7aB9GsZ82Jcu2g） Gmail Appに表示されるスクリーンショットは次のとおりです。[link]（https://cdn.shopify.com） /s/files/1/1041/0020/files/IMG_1284.PNG?6670755951936836937） –

@ S.Whiteは、内部テーブルに 'margin：0 auto;'を試したかどうかを知りたかっただけです。また、すべてのテーブルで 'align =" center "'属性の代わりに使用することをお勧めします。上記の更新された回答をご覧ください。 –

私は新しいコードを試しました。それはGmail上の奇妙な右利きの問題を完全に解決し、他のクライアントにも問題なく表示されます。私はフッタバーのコードも同じセクションを実装しましたが、今は完全に動作します。これらのスニペットを追加した後の私の唯一の問題は、Gmailアプリケーションでのバーの薄い外観でした。小さなパディングで解決しました。救助に来ていただきありがとうございます！ :-) –

GmailモバイルでHTMLのメールテキストが正しく表示されない

答えて

関連する問題