HTML Outlook 2013电子邮件超过面板宽度的100％宽度width =“ 100％”设置
[英]HTML Outlook 2013 email exceeding 100% width of panel width width=“100%” set
问题描述
I'm trying to create a responsive HTML email for Outlook 2013 but I'm having trouble trying to get the email to respect the width limit I have set (ie width="100%"). 
我正在尝试为Outlook 2013创建响应HTML电子邮件，但是尝试使电子邮件遵守我设置的宽度限制（即width =“ 100％”）时遇到了麻烦。 The actual width is indeed being set to 100% until I reach a certain smaller width at which point I have to scroll to view the information. 实际上，实际宽度已设置为100％，直到我达到某个较小的宽度为止，此时必须滚动查看信息。
The code works fine in IE (no surprise) so I know the code itself is at least appropriate in that sense (ie I haven't wrapped something incorrectly). 该代码在IE中工作正常（毫不奇怪），因此我知道代码本身至少在某种意义上是适当的（即，我没有包装不正确的东西）。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
@media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
<a href="#" style="text-decoration: none; color: #fff;">Home</a> | <a href="#" style="text-decoration: none; color: #fff;">News</a> | <a href="#" style="text-decoration: none; color: #fff;">Events</a> | <a href="#" style="text-decoration: none; color: #fff;">Applications</a> | <a href="#" style="text-decoration: none; color: #fff;">OrgChart</a>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
<a href="#" style="text-decoration: none; color: #004467; font-size: 32px; font-weight: normal; font-family:'Franklin Gothic', sans-serif">Title</a>
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
<a href="#" style="font-size:18px; text-decoration: none;font-family: 'Franklin Gothic', sans-serif;">Place of Work</a><br>
Jacob Johnson<br>
Work Role<br>
<a href="mailto:me@me.com">jacobjohnson@me.com</a><br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Recap: My email extends beyond the width limit I have it set for and I can't figure out why. 回顾：我的电子邮件超出了我设置的宽度限制，我不知道为什么。 Outlook is a pain in my butt. 前景让我很痛苦。
2 个解决方案
解决方案1
0 2017-06-13 17:07:31
Outlook isn't broken, your code exhibits the same behavior in almost every email client. Outlook并未损坏，您的代码在几乎每个电子邮件客户端中都表现出相同的行为。
The problem is that you set all the tables to have a width of 100%. 问题是您将所有表的宽度设置为100％。 On many of them, you added the class .deviceWidth, where you specify the width in media queries, but not for anything wider than 640px. 在其中许多文件上，您添加了.deviceWidth类，您可以在其中指定媒体查询的宽度，但不能指定大于640px的宽度。 Outlook does not support @media queries. Outlook不支持@media查询。
Try adding .deviceWidth {width:440px!important; padding:0;} 尝试添加.deviceWidth {width:440px!important; padding:0;} .deviceWidth {width:440px!important; padding:0;} to your style sheet outside of media queries and address your width="100%" on every table. .deviceWidth {width:440px!important; padding:0;}移至媒体查询之外的样式表，并在每个表上指定width="100%" 。
JSFiddle is not working for me right now so I can't show you a sample. JSFiddle目前无法为我工作，因此无法向您展示示例。
Good luck. 祝好运。
解决方案2
0 2017-06-19 10:18:48
Outlook doesn't respect 100% width so you need to set a fixed width for outlook, add width to the wrapper table Outlook不尊重100％的宽度，因此您需要为Outlook设置一个固定的宽度，将宽度添加到包装器表中
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
And using the class set width to 100% for all others. 并使用该类将所有其他宽度设置为100％。 Use !important at the end of the declaration to override inline css. 在声明的末尾使用！important覆盖内联css。
table.for_others {width: 100% !important;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.