Outlook 2013中的电子新闻问题
我正在为客户设置简报，但它会不断地炸毁图像并且不会读取容器宽度。我尝试在每一层上添加严格的宽度，并将所有div转换为表格。有谁知道为什么Outlook 2013可能无法识别容器的CSS样式？这似乎只发生在Outlook 2013中，到目前为止，我还没有找到解决这个问题的方法。
<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>
<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> </p>
<p>We know Halloween is not just for kids: It’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’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>
<h2 style="color: purple;"> </h2></td>
</tr>
</tbody>
</table>
</td></tr></table>
<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;"> </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&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’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’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’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;"> </p>
<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> </p>
<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;"> </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ça</strong></a><br />
The Brazilian distillery's newest expression of cachaç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ñejo tequila aged at least 12 months in American white oak casks.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td></tr></table>
<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;"> </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;"> </div>
<custom name="opencounter" type="tracking">
<p align="center" style="text-align: center;"> </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 & Specialty Information, 10405 6th Avenue N, Suite 210, Minneapolis, MN 55441<br />
Copyright 2017 by EPG Media & 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;"> </p>
</custom>
</td>
</tr>
</table>
</td></tr></table></td></tr></table>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
最大宽度不适用于Outlook。您的问题不仅仅发生在Outlook 2013中。2010年，2016年和Windows 10 Mail也存在同样的问题。
尝试直接在对象中添加table，td和images的宽度，并为其他尊重它的电子邮件浏览器保留max-width。例如：
<img height="450" width="600" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" style="display:block; max-width: 600px;">
记住电子邮件设计不是前端设计是有帮助的。它有不同的规则和逻辑。
如果您对电子邮件中的值是否有效有疑问，请使用此资源。
包含修正的示例代码
我会让你对此进行微调。
展望2013年业绩
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？