2017-10-12 8 views
1

クライアント用のニュースレターを設定していますが、イメージが連続的に爆発し、コンテナの幅が読み取られません。私はすべての単一のレイヤーに厳密な幅を追加し、すべてのdivをテーブルにチューリングしてみました。 Outlook 2013がコンテナのCSSスタイルを認識しない理由を知っていますか?これはOutlook 2013でのみ発生するように見えますが、これまでまだこれを修正する方法が見つかっていません。Outlook 2013でenewsに関する問題

<html> 
<head> 
    <!-- <style type="text/CSS">body, #body_style { 
     background:#f3f2e8; 
     color:#000; 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px;} 
     .yshortcuts {color: #F00;} 
    </style> 
!--> 
    <meta charset="UTF-8"> 
    <title>Halloween Cocktails to Heat Up Your Bar</title> 
</head> 
<body bgcolor="#f3f2e8" style="padding:0;margin:0;background:url('http://betterbartend.com/wp-content/uploads/2017/10/Wallpaper-1.jpeg');font-family:arial, sans-serif;font-size:12px; background-color: white;"> 
<table align="center" border="0" cellpadding="5" cellspacing="0" width="728"> 
    <tbody> 
     <tr valign="center"> 
      <td align="left" style="font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: normal; font-size: 10px; font-weight: normal; padding-left: 10px;" valign="bottom" width="400">Better Bartending - October 11, 2017</td> 
      <td align="right" style="font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: normal; font-size: 10px; font-weight: normal; padding-right: 20px;" valign="bottom" width="328">To view this email as a web page, click <a href="@{mv_online_version}@">here.</a></td> 
     </tr> 
    </tbody> 
</table> 
<table style="margin: 10px auto; max-width: 760px !important; width: 760px !important; background-color: white;"> 
    <tr> 
<td style="margin: 10px auto; max-width: 760px !important; width: 760px !important; background-color: white;"> 
    <table><tr> 
<td style="padding: 20px; max-width: 720px !important; width: 720px !important; background-color: white;"> 
<p><a href="https://beverage-handbook-store.myshopify.com/collections/print-editions/products/2017-beer-handbook" target="_blank"><img border="0" class="ads" src="https://epgmedia.s3.amazonaws.com/email/cheers/CH_WeeklyEnewsletter/2017/images/BIG%20Beer%20HB%20728x90.jpg" style="display:block" width="728" /></a></p> 
&nbsp; 

<p style="max-width: 720px !important; width: 720px !important; background-color: white;"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/images/BB-newsletter-header.jpg" style="max-width: 720px;" /></p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tbody> 
     <tr> 
      <td align="left" style="max-width: 330px; border-right: 1px solid black; padding: 10px;" valign="middle" width="330"> 
      <p><a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank"><img alt="Story Image Here" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/PanamaJack-Halloween-Drink.jpg" style="max-width: 320px;" /></a></p> 

      <h1 style="color: purple;"><a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank">Halloween Cocktails to Heat Up Your Bar</a></h1> 

      <p>&nbsp;</p> 

      <p>We know Halloween is not just for kids: It&rsquo;s a major occasion for adults to cut loose, dress up and enjoy an adult beverage or two. Bars with costume contests or parties are a huge draw. Even if your bar doesn&rsquo;t host a Halloween bash, you can still get in on the action by offering some festive cocktails. Here are a few ideas. <a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank">Read More</a></p> 
      </td> 
      <td align="left" style="padding: 20px; vertical-align: top;" valign="middle" width="300"> 
      <h1 style="color: purple;">Survey Says: </h1> 

      <p style="font-size: 16px;"><a href="" target="_blank"><img alt="Poll" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/SurveyGraphic1.jpg" style="float: right; padding-right: 0px; width: 300px; max-width: 300px; max-height: 300px;" /></a></p> 
      &nbsp; 

     <h2 style="color: purple;">&nbsp;</h2></td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tbody> 
     <tr> 
      <td style="max-width: 330px; padding: 10px;" width="330"><a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank"><img alt="Q and A" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Tracey-Mellon-700x350.jpg" style="float: left; padding-right: 20px;" width="140" /></a> 

      <h1 style="color: purple;"><a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank">Q&amp;A:<br /> 
      Tracey Mellon</a></h1> 

      <p><em>Tracey Mellon is a bartender at American Whiskey in New York.</em></p> 

      <p><strong>Better Bartending:</strong> You just won the New York leg of Drambuie&rsquo;s 2nd annual Modern Classics. Is this your first cocktail contest or have you competed in others?<br /> 
      <br /> 
      <strong>Tracey Mellon:</strong> This was in fact my first competition. After I joined the U.S. Bartender&rsquo;s Guild, and I started bartending at American Whiskey, I was heavily exposed to the cocktail competition world and immediately wanted to take part. <a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank"><br> 
      Read More</a></p> 
      </td> 
      <td align="left" style="text-align: center;" valign="middle"> 
      <p><a href="http://www.getyourhoney.com" target="_blank"><img alt="" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/Ads%20-%20BB%20Oct/Better-Bartending-Ad.jpg" style="width: 300px; height: 250px; margin: 0 auto; text-align: center;" /></a></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<table style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
    <tr style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
     <td style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
<table style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
    <tbody style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
     <tr style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
      <td style="border-right: 1px solid black; padding: 10px; width: 300px !important; max-width: 300px !important;"> 
      <h1 style="color: purple;">BLOG WATCH</h1> 

      <h1 style="width: 280px !important; max-width: 280px !important;"><a href="http://betterbartend.com/gastronomista/" target="_blank">Gastronomista</a></h1> 

      <p style="width: 280px !important; max-width: 280px !important;">Launched in 2009, Gastronomista focuses on the finer elements of cocktail culture. Founder/writer Emily Arden Wells is by day an architect, and lends her attention to detail to the world of drinks in this long-running, award-winning blog. <a href="http://betterbartend.com/gastronomista/" target="_blank">Read More</a></p> 
      </td> 
      <td style="padding-left: 20px; width: 390px !important; max-width: 390px !important;"> 
      <h1 style="color: purple;">TREND WATCH</h1> 

      <h1 style="width: 380px !important; max-width: 380px !important;"><a href="http://betterbartend.com/instant-canned-cocktails/" target="_blank">Instant Canned Cocktails</a></h1> 

      <p style="width: 380px !important; max-width: 380px !important;">The ready-to-drink (RTD) craft cocktails trend is on fire, with new launches hitting the market practically every month. There&rsquo;s no shortage of options for consumers who just want to pop open a can to enjoy a cocktail, but some bars are getting creative by mixing and serving drinks right in the can. <a href="http://betterbartend.com/instant-canned-cocktails/" target="_blank">Read More</a></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<table style="background-color: #e2f6fc; padding: 5px 10px; max-width: 700px !important; width: 700px !important;"> 
    <tr style="background-color: #e2f6fc; max-width: 700px !important; width: 700px !important;"> 
     <td style="background-color: #e2f6fc; max-width: 700px !important; width: 700px !important;"> 
<h1 style="color: purple;">RECIPES</h1> 

<p style="background-color: black; height: 3px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 
&nbsp; 

<table style="max-width: 720px !important; width: 720px !important;"> 
    <tbody> 
     <tr> 
      <td style="padding: 5px 20px; border-right: 2px solid white; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/orange-rhyming-dictionary/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Chalino_Orange-Rhyming-Dictionary.jpg" style="max-width: 180px; max-height: 160px; height: 150px; width: 180px;" /></a> 

      <h2 style="color: #28858a;"><a href="http://betterbartend.com/orange-rhyming-dictionary/" target="_blank">Orange Rhyming Dictionary</a></h2> 

      <ul> 
<li>1 oz. Altos Reposado tequila</li> 
       <li>1/2 oz. Banhez mezcal</li> 
       <li>1 oz. Fresh carrot juice</li> 
       <li>1/2 oz. Cocchi Americano</li> 
       <li>1/4 oz. Honey syrup</li> 
       <li>Bar spoon Fernet Vallet</li> 
       <li>0.5 g Citric acid</li> 
       <li>2 Drops 20% saline solution</li> 
       <li>3 Sprigs cilantro</li> 
      </ul> 

      <p>Combine ingredients in mixing glass. Clap cilantro and add it to the glass. Stir with ice then strain into a chilled coupe. Express an orange peel over the drink.</p> 

      <p><em>The mixologists at Chalino in Portland, OR, created this recipe.</em></p> 
      </td> 
      <td style="padding: 5px 20px; border-right: 2px solid white; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/stone-mule/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Mule5small.jpg" style="max-width: 180px; height: 160px; width: 180px; height: 150px;" /> </a> 
      <h2 style="color: #28858a; padding-left: 10px;"><a href="http://betterbartend.com/stone-mule/" target="_blank">Stone Mule</a></h2> 

      <ul> 
       <li>1 1/2 oz. Brandy</li> 
       <li>1/2 oz. Peach liqueur</li> 
       <li>3/4 oz. Fresh lime juice</li> 
       <li>3 oz. Ginger beer</li> 
      </ul> 

      <p>Combine ingredients in glass with ice. Garnish with dried apricot and slice of lime.</p> 

      <p><em>Mike Page, beverage development specialist with Breakthru Beverage Illinois, created this recipe.</em></p> 

      </td> 
      <td style="padding: 5px 20px; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/fennel-countdown/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Fennel%20Countdown-2small.jpg" style="max-width: 180px; max-height: 160px; height: 150px; width: 180px;" /></a> 
      <h2 style="color: #28858a; padding-left: 10px;"><a href="http://betterbartend.com/fennel-countdown/" target="_blank">Fennel Countdown</a></h2> 

      <ul> 
       <li>2 oz. Absolut Elyx vodka</li> 
       <li>1/4 oz. Suze gentian liqueur</li> 
       <li>3/4 oz. Fresh fennel cordial</li> 
       <li>2 oz. Freshly squeezed pink grapefruit juice</li> 
       <li>1/2 oz. Freshly squeezed lime juice</li> 
      </ul> 

      <p>Shake all ingredients in a cocktail shaker, strain into a chilled cocktail coupe and garnish with grapefruit zest.</p> 

      <p><em>The mixologists at Elyx created this recipe.</em></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<p>&nbsp;</p> 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<h1 style="color: purple;">NEW PRODUCTS</h1> 

<table style="width: 720px !important; max-width: 720px !important;"> 
    <tbody> 
     <tr> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/novo-fogo-colibri-cachaca/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Colibri-2-2.jpg" style="max-width: 110px !important; max-height: 150px !important; width: 57px !important; height: 150px !important;" /></a></td> 
         <td><a href="http://betterbartend.com/novo-fogo-colibri-cachaca/" target="_blank"><strong>Novo Fogo Colibri Cacha&ccedil;a</strong></a><br /> 
         The Brazilian distillery&#39;s newest expression of cacha&ccedil;a now available in the U.S.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/west-cork-peat-charred-bog-oak-irish-whiskeys/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Peat-Charred-Cask.png" style="max-width: 110px !important; max-height: 150px !important; width: 37px !important; height: 150px !important;" /></a></td> 
         <td><a href="http://betterbartend.com/west-cork-peat-charred-bog-oak-irish-whiskeys/" target="_blank"><strong>West Cork Peat Charred, Bog Oak Irish Whiskeys</strong></a><br /> 
         Single malts aged in sherry casks and finished in barrels charred via a proprietary device.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/hornitos-cristalino-tequila/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Hornitos-Cristalino-Bottle-Image-1.png" style="max-width: 110px; max-height: 150px; width: 61px; height: 150px;" /></a></td> 
         <td><a href="http://betterbartend.com/hornitos-cristalino-tequila/" target="_blank"><strong>Hornitos Cristalino Tequila</strong></a><br /> 
         A filtered, clear a&ntilde;ejo tequila aged at least 12 months in American white oak casks.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 
&nbsp; &nbsp; 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <h1 style="color: purple;">DRINK RECIPE CONTESTS</h1> 

    <table style="max-width: 720px !important; width: 720px !important;"> 
     <tbody> 
      <tr> 
       <td style="border-right: 1px solid black; width: 220px !important; max-width: 220px !important; min-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="http://bartenderoftheyear.liquor.com/" target="_blank"><strong>Bartender of the Year</strong></a><br /> 
          Heaven Hill Brands<br /> 
          Entries Open: Sept. 1, 2017</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
       <td style="border-right: 1px solid black; width: 220px !important; max-width: 220px !important; min-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="https://www.mapleguild.com/mapleit" target="_blank"><strong>Maple It</strong></a><br /> 
          The Maple Guild<br /> 
          Entry deadline: Dec. 5, 2017</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
       <td style="width: 220px !important; min-width: 220px !important; max-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="https://www.beefeatermixldn.com/" target="_blank"><strong>MIXLDN 2017</strong></a><br /> 
          Beefeater Gin<br /> 
          Entry Deadline: Jan. 1, 2018</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

    <div style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</div> 
    <custom name="opencounter" type="tracking"> 
    <p align="center" style="text-align: center;">&nbsp;</p> 

    <p align="center"><span xml="lang">This email was sent to you on behalf of <span xml="lang">Better Bartending by Cheers Magazine<br /> 
    EPG Media &amp; Specialty Information, 10405 6th Avenue N, Suite 210, Minneapolis, MN 55441<br /> 
    Copyright 2017 by EPG Media &amp; Specialty Information<br /> 
    For more news and information visit </span><a href="http://betterbartend.com/"><span xml="lang">www.betterbartend.com</span></a> or <a href="http://epgmediallc.com/subscribe/"> <span xml="lang">Subscription Center</span></a><br /> 
    <a href="@{confirmunsubscribelink}@"><span xml="lang">opt out</span></a></span></p> 

    <p align="center" style="text-align: center;">&nbsp;</p> 
    </custom> 

</td> 
</tr> 
</table> 
</td></tr></table></td></tr></table> 
</body> 
</html> 

答えて

0

最大幅はOutlookでは機能しません。あなたの問題はOutlook 2013以上のもので起こっています。これは2010年、2016年、およびWindows 10 Mailで同じ問題です。

テーブル、tdおよび画像の幅をオブジェクトに直接追加し、それを尊重する他の電子メールブラウザの場合はmax-widthのままにしてください。たとえば:

<img height="450" width="600" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" style="display:block; max-width: 600px;"> 

電子メールのデザインはフロントエンドのデザインではないことに注意してください。それは異なった規則と論理を持っています。

値が電子メールで機能するかどうかについて疑問がある場合は、このリソースを使用してください。

修正

とサンプルコード私はあなたが微調整このもらおう。

アウトルック2013件の結果

Outlook 2013

関連する問題