2017-10-27 4 views
0

私はhtml電子メールで作業しています。それは一般的にテストでは機能しましたが、Outlookで変更されました。私はここで質問を見て、それにまともな量を読んでいるが、様々な修正を試みた後、何も働いていない。私は、Dreamweaverを使用して、合計初心者です、私はコードが恐ろしいかもしれません知っている:ここでOutlookのHTML形式の電子メールのバグ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<!-- utf-8 works for most cases --> 
<meta name="viewport" content="width=device-width"> 
<!-- Forcing initial-scale shouldn't be necessary --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<!-- Use the latest (edge) version of IE rendering engine --> 
<title>EmailTemplate-Hybrid</title> 
</head> 
<body width="100%" bgcolor="#FFFFFF" style="margin: 0;" yahoo="yahoo"> 
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;"> 
    <tr> 
    <td><center style="width: 100%;"> 

     <!-- Visually Hidden Preheader Text : BEGIN --> 
     <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Historic Renovation. </div> 
     <!-- Visually Hidden Preheader Text : END --> 

     <div style="max-width: 100%;"> 
      <!--[if (gte mso 9)|(IE)]> 
      <table cellspacing="0" cellpadding="0" border="0" width"100%" align="center"> 
      <tr> 
      <td> 
      <![endif]--> 

      <!-- Email Header : BEGIN --> 
    <table width="60%" height="auto" align="right"> 
      </table></div></center></td><td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/gallery/residential/">GALLERY </a></td> 
      <td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/services/">SERVICES</a></td> 
     </tr></table> 
    <table class="container " width="100%"> 
     <td> 

     <img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b9d5dc85-0cfc-470f-a3e6-7abaffb8849d.jpg" width="100%"> 
     </td> 
      </table> 
        <!-- Email Header : END --> 

       <!-- Email Body : BEGIN -->  
      <table width="100%"> 
      <tr> 
       <td style="background: #FFFFFF; font-size: 4vw; font-family: serif; text-align: right " width="100%" height="125px"><blockquote> 
        <p><a style="color: black" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">HISTORIC RENOVATION</a> </p> 
       </blockquote> 
       </td> 
       </tr> 
      </table> 
      <!-- 1 Column Text : BEGIN --> 
      <table width="100%"> 
      <tr> 
       <td> 
    <img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b1bd7d4c-a5f9-4081-a543-b94b4cf6d9d2.jpg" width="100%"> 
       </td> 
       </tr> 
       <tr> 
       <td> 
    <a href="http://www.ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/328fa1bb-1858-4f8c-9c89-2002fd132365.jpg" alt="" width="100%"></a> 
       </td> 
       </tr> 
      </table> 
    <table> 
    <tr> 
    <td> 
     <h1 style="font-family: sans-serif; text-align: left; font-size: 4vw; line-height: auto; padding-top: 20px; padding-left: 20px; color: #000000;"> Another Project in <span style="color: #4CA7A0"><a style="color: teal" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">Bucks County!</a></span></h1> 
     </td> 
     </tr> 
        <tr> 
        <td> 
        <p style="text-align: center; font-family: sans-serif; font-size: 3vw; line-height: auto; color: #000000"> Ernst Brothers is fulfilling the new owners vision for this property in Solebury, creating a serene guest house from the bones of this 18th-century farmhouse.</p> 
         </td> 
     </tr> 
      </table> 
         <!-- Button : Begin --> 

         <table cellspacing="0" cellpadding="0" border="0" align="right" style="margin: auto;"> 
         <tr> 
          <td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/" style="background: #222222; border: 15px solid #222222; padding: 0 10px; color: #ffffff; font-family: sans-serif; font-size: 2.75vw; line-height: 1.1; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
          <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->Read <span style="text-align: left"></span>More 
          <!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--> 
          </a> 
          </td> 
         </tr> 
      </table> 
         <!-- Button : END --> 

        <!-- Visit US : BEGIN --> 


    <!-- Two Even Columns : END --> 

      <!-- Email Body : END --> 

      <!-- Email Footer : BEGIN --> 
      <table width="100%"> 
      <tr> 
      <td> 
       <a href="http://www.ernstbrothers.com/contact-us/"><img style="padding-top: 40px; display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/374d5aa5-5dd8-4a96-89e2-2a392f6092c3.jpg" alt="" width="100%"> 
      </a></td> 
      </tr> 
      <tr> 
      <td> 
       <a href="http://www.ernstbrothers.com/contact-us/"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/4441e9d8-1138-44e9-95ee-cd59c1019d9d.jpg" width="100%"></a> 
      </td> 
      </tr> 
     </table> 
<table width="100%" height="200px" style="background: #FEFDFD"> 
      <td style="text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 4vw; line-height: auto;"><a style="color: black" href="http://maps.apple.com/?q=Ernst+Brothers&amp;sll=40.186293,-75.227316&amp;z=10&amp;t=s"> 1104 North Bethlehem Pike <br> 
Spring House, PA 19477</a></td> 
      </table> 
<table width="100%" height="147" border="1" align="center" style="background-color: darkgrey"> 
    <tbody> 
    <tr> 
     <td width="15%" align="center"><a href="https://www.instagram.com/ernstbrothers/"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/391b81fc-92ee-4072-b859-dc538485f046.png" alt="" width="80%"></a></td> 
     <td width="15%" align="center"><a href="https://www.facebook.com/ErnstBrothers/"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/e5447cda-cd97-45b1-9411-6703b985f3b2.png" alt="" width="80%"></a></td> 
     <td width="15%" align="center"><a href="https://twitter.com/ErnstBrothers"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b88e145d-feda-4b66-86fe-6aea5083e760.png" alt="" width="80%"></a></td> 
     <td width="15%" align="center"><a href="https://www.houzz.com/pro/ernstbrothers/ernst-brothers"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/ba8cce9e-385a-4827-964d-fa608ffce6b2.png" alt="" width="80%"></a></td> 
     <td width"40%" style="font-size: 3vw; font-family: sans-serif; text-align: center"><a style="color: white" href="tel:+2154535124">215-453-5124</a></td> 
    </tr> 
    </tbody> 
    </table> 
      <!-- Email Footer : END --> 
        <!--[if (gte mso 9)|(IE)]> 
      </td> 
      </tr> 
      </table> 
      <![endif]--> 





      <center> 
       <br> 
       <br> 
       <br> 
       <br> 
       <br> 
       <br> 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;"> 
        <tr> 
         <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;"> 
          <table border="0" cellpadding="0" cellspacing="0" id="canspamBar"> 
           <tr> 
            <td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;"> 
             This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a> 
             <br> 
             <a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a> 
             <br> 
             *|LIST:ADDRESSLINE|* 
             <br> 
             <br> 
             *|REWARDS|* 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
       <style type="text/css"> 
        @media only screen and (max-width: 480px){ 
         table#canspamBar td{font-size:14px !important;} 
         table#canspamBar td a{display:block !important; margin-top:10px !important;} 
        } 
       </style> 
      </center></body> 
</html> 

は私のデスクトップ上の.htmlからクロームにオープンし、見えるように意図されています方法です。 IMG

Outlookでの表示は次のとおりです。 IMG2

ご協力いただければ幸いです。

+1

しかし...問題は何ですか?あなたは一般的なフォーマットだけを話します。 –

+0

とにかくここに電子メールのガイドtu css:https://www.campaignmonitor.com/css/selectors/child/ –

答えて

0

電子メールはフロントエンドWeb開発ではありません。以前はDreamweaverを電子メールの開発に使用していましたが、HTML5とそれ以前のバージョンを混在させることはできないため、放棄しなければなりませんでした。それは問題です。電子メールプログラムはCSS3の限定版をサポートしており、一部ではサポートしていないものもあります。

Outlookは、Webkitのような標準的なHTMLレンダリングエンジンに従わないため、有名です。それはMicrosoft Wordに基づいています。

Outlookは本当に800ピクセルよりも広い幅をサポートしていません。 Gmailも似ています。だからwidth=100%はあなたに矛盾した結果を与えるでしょう。 Outlookがまっすぐstyle="font-size: 18px;"

イメージ画像のために

のようなものを試してみてくださいstyle="font-size: 2.75vw;"のようなものを理解していない

フォント

、Outlookは<img width="580">のようなものを尊重しますが、応答しないことがあり〜<img width="100%">。私はそれがインラインスタイルの幅を無視することがわかりますが、他のプログラムはそれをとてもうまく使います。

<img src=""http://www.gwally.com/news/photos/catintinfoilhat.jpg" 
alt="A boy and his cat" width="580" align="center" style="max-width: 100%; width: 580px;"/> 

は、私は私のテストアカウントを取得して問題が動作するように抱えているので、私はあなたが必要なだけの助けを与えることはできません。

はこのような何かを試してみてください。私はあなたがこれらの問題に取り組むと、一貫した電子メールへの道のりをさらに引き下げると思います。詳細については

、これはメールにどのような作品に多大なリソースです:

関連する問題