2

私のアプリケーションは HTML 電子メールをユーザーに送信します。プレーンな HTML ファイルとしてテストすると、さまざまなブラウザー (Firefox、IE、Chrome、Safari、Android フォン ブラウザー) で問題ないように見えます。また、テストした Web メール クライアント (Gmail、Yahoo メール) でも問題なく表示されます。

しかし、Microsoft Outlook でメッセージを表示すると、レイアウトがめちゃくちゃになります。具体的には、右側のアイコンは上揃えではなく、左側のアイコンよりもはるかに下に表示されます。これは HTML コードです。

<div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF">
   <!-- Logos -->
       <div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px">
           <a href="http://mywebsite.com" target="_blank" style="color: #333; "><img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0"></a>
           <a href="mailto:?subject='.$email_subject.'&body='.$email_body.'" style="color: #333"><img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0"></a>
       </div>
   <!-- Title -->
       <div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;">
           <span style="font-size:12px; padding-left: 2px; font-weight: bold;">Comment line - should be left aligned</span>
       </div>
       <div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;">
           <span><b>My Title Should Be Centered</b></span>
      </div>
   </div>
4

2 に答える 2

1

レスポンシブ技術も使用してメールを作成する必要があります。この方法を説明する非常に優れた記事は次のとおりです。 http://blog.booking.com/responsive-email.html

于 2013-09-04T19:48:01.110 に答える