在Outlook中设置HTML电子邮件的最大宽度 - 为什么它与Gmail不同？
我一直在努力设计一个HTML电子邮件，出于某种原因，它在MailChimp / Chrome / GMail中看起来很棒，但在Outlook中，列被拉伸并且看起来很糟糕（见截图）。我对HTML不太满意，并且我试图将几个max-width参数更改为600px而不是100％，但没有成功。
我希望这封电子邮件总是600px宽。
非常感谢任何帮助。
^它在Chrome / Gmail中的外观
^它在Outlook中的外观（顶部蓝色部分为600px，其余部分为拉伸）
以下是我正在使用的HTML代码：
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:600 !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
body,#backgroundTable{
background-color:#314A66;
}
h1,.h1{
color:#FFFFFF;
display:block;
font-family:Verdana;
font-size:26px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:center;
}
h2,.h2{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3,.h3{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:20px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4,.h4{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:12px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color:#36C0CC;
}
.preheaderContent div{
color:#CCCCCC;
font-family:Lucida Sans,Lucida;
font-size:10px;
line-height:110%;
text-align:left;
}
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
color:#EEEEEE;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#36C0CC;
border-bottom:0;
}
.headerContent div{
color:#FFFFFF;
font-family:Verdana;
font-size:14px;
font-weight:normal;
line-height:100%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:10px;
text-align:left;
vertical-align:top;
}
.headerContent div a:link,.headerContent div a:visited,.headerContent div a .yshortcuts {
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.headerContent div img{
height:auto;
max-width:600px;
}
#templateContainer,.bodyContent{
background-color:#FFFFFF;
}
#templateBody{
border:0px none #10263F;
}
.bodyContent div,#social div{
color:#505050;
font-family:Verdana;
font-size:12px;
line-height:150%;
}
.bodyContent div{
text-align:justify;
}
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts ,#social div a:link,#social div a:visited{
color:#336699;
font-weight:normal;
text-decoration:none;
}
.bodyContent div img{
display:inline;
height:auto;
max-width:360px;
}
#social{
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
#social div{
text-align:center;
}
#social div img{
max-width:560px;
}
#templateSidebar{
background-color:#accb50;
border-left:0px dotted;
}
.sidebarContent div{
color:#ffffff;
font-family:Lucida Sans,Lucida;
font-size:11px;
line-height:150%;
text-align:justify;
}
.sidebarContent div a:link,.sidebarContent div a:visited,.sidebarContent div a .yshortcuts {
color:#336699;
font-weight:normal;
text-decoration:none;
}
.sidebarContent img{
display:inline;
height:auto !important;
margin-bottom:10px !important;
}
#templateFooter{
background-color:#36C0CC;
border-top:2px solid #111111;
}
.footerContent div{
color:#CCCCCC;
font-family:Verdana;
font-size:10px;
line-height:125%;
text-align:left;
}
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
color:#EEEEEE;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#utility{
background-color:#36C0CC;
border:0;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
body,#backgroundTable{
background-color:#ffffff;
}
h1,.h1{
color:#ffffff;
text-align:left;
font-family:Lucida Sans,Lucida;
line-height:110%;
}
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts{
color:#4D4C4C;
}
.bodyContent div,#social div{
font-family:Lucida Sans,Lucida;
font-size:11px;
color:#545454;
line-height:150%;
}
#templateContainer,.bodyContent{
background-color:#E2E2E2;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #ffffff;width: 600 !important;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;background-color: #ffffff;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #36C0CC;">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;"><a href="www.scandit.com" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;"><img align="left" alt="" height="57" src="http://gallery.mailchimp.com/3c1958ec76b5e1d93c32cf088/files/scandit_logo_white_wtag2.png" style="width: 147px;height: 57px;float: left;border-width: 0px;border-style: solid;line-height: 100%;outline: none;text-decoration: none;" width="147"></a> </div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;">
Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #E2E2E2;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="background-color: #36C0CC;border-bottom: 0;">
<tr>
<td class="headerContent">
<div style="color: #FFFFFF;font-family: Verdana;font-size: 14px;font-weight: normal;line-height: 100%;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 10px;text-align: left;vertical-align: top;"><span style="font-size:24px;"><strong> Howdy!</strong><br></span></div>
<div id="_com_1" uage="JavaScript" style="color: #FFFFFF;font-family: Lucida Sans,Lucida;font-size: 14px;line-height: 150%;text-align: justify; padding-left: 20px;">
Welcome!<br><br>
<br></div>
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border: 0px none #10263F;">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="bodyContent" style="background-color: #E2E2E2;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;">
<strong>Features</strong><br>
<hr>
</div>
<ul>
</ul>
</div>
<hr>
<br>
<center><FORM METHOD="LINK" ACTION="https://SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT">
<INPUT TYPE="submit" VALUE="SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT">
</FORM></center>
<br>
<br>
SAMPLE TEXT
<br>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
</td>
<!-- // Begin Sidebar \\ -->
<td valign="top" width="300" id="templateSidebar" style="background-color: #accb50;border-left: 0px dotted;">
<table border="0" cellpadding="0" cellspacing="0" width="00">
<tr>
<td valign="top" class="sidebarContent" style="padding-bottom:20px;">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-bottom:0;">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><h4 class="h4" style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<span style="color:#fff0f5;">Getting Started</span></h4>
<hr>
<div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<strong><span style="font-size:12px;"><span style="color: rgb(255, 240, 245); ">
<ul>
<li>Barcode Scanner SDK Documentation
<ul>
</ul>
<br>
SAMPLE TEXTSAMPLE TEXTSAMPLE TEXT <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">FAQs</a> or <a href="mailto:SAMPLETEXT.com" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">contact us</a>.<br>
<h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<br><br>
<span style="color:#fff0f5;">Get in Touch</span></h4>
<hr>
SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT<br>
<h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<br><br>
<span style="color:#fff0f5;">Connect with us</span></h4>
<hr>
</div>
</td>
</tr>
</table>
<!-- // Begin Module: Social Block with Icons \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-left:20px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="4">
<tr mc:hideable="hideable_1" mchideable="hideable_1">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_facebook.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<span style="font-size:11px;"><a href="http://www.facebook.com/pages/Scandit/127334280653842" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Friend us on Facebook</a></span></div>
</div>
</td>
</tr>
<tr mc:hideable="hideable_2" mchideable="hideable_2">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_twitter.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.twitter.com/scandit" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Follow us on Twitter</a> </div>
</td>
</tr>
<tr mc:hideable="hideable_3" mchideable="hideable_3">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/sfs_icon_rss.1.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.scandit.com/blog" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Read our blog</a> </div>
</td>
</tr>
<tr mc:hideable="hideable_4" mchideable="hideable_4">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_forward.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">Sign up for our newsletter</a></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // End Module: Social Block with Icons \\ -->
</td>
</tr>
</table>
</td>
<!-- // End Sidebar \\ -->
</tr>
<tr>
<td colspan="2" valign="middle" id="social" style="padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: center;"><a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">follow on Twitter</a> | <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">friend on Facebook</a> | <a href="http://www.scandit.com/blog/" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">read our blog</a> | <a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">forward to a friend</a> </div>
<center><em>SAMPLE TEXTSAMPLE <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">SAMPLE TEXT</a>.</em></center>
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter" style="background-color: #36C0CC;border-top: 2px solid #111111;">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" width="350">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
*|IFNOT:ARCHIVE_PAGE|*
*|LIST:DESCRIPTION|*
<br>
<strong>Our mailing address is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|*
<br>
*|END:IF|*
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="background-color: #36C0CC;border: 0;">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: center;">
<a href="*|ARCHIVE|*" style="color: #4D4C4C;font-weight: normal;text-decoration: underline;">view email in browser</a>*|END:IF|*
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
</body>
</html>
4 个答案:
答案 0 :(得分：7)
电子邮件使用基于表格的布局和内联样式是最佳做法。如果您使用MailChimp的模板系统来构建此电子邮件，您定义的CSS样式将在发送时自动进行。但是，您仍然应该使用基于表格的布局。
示例：
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="background: #36C0CC" colspan="2">Blue Section</td>
</tr>
<tr>
<td style="background: gray">Gray Section</td>
<td style="background: #accb50">Green Section</td>
</tr>
</table>
答案 1 :(得分：3)
您可以使用Outlook conditional tag来模仿它。你只需将你应用最大宽度的div夹在中间。用它。
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div style="max-width:580px; margin:0 auto;">
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
答案 2 :(得分：1)
我认为你在
之后忘记了px
body{
width:600 !important;
}
所以它应该有效
body{
width:600px !important;
}
再次设置身体也不好，你做了两次。
答案 3 :(得分：0)
试试这个max-width流体示例。它结合使用了最大宽度，Outlook条件和Outlook '11的媒体查询（基于webkit，不能以Outlook条件为目标）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles - last updated 18 Feb 2014 */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
.link1 a, .link1 a:active, .link1 a:visited {color: #005288 !important; text-decoration: none;}
.link2 a, .link2 a:active, .link2 a:visited {color: #FFFFFE !important; text-decoration: none;}
table td {border-collapse: collapse;}
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
<tr>
<td align="left" style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？