任何帮助都可以!我已经进行了几个小时的电子邮件测试。我一直在研究!我似乎无法弄清楚为什么我的电子邮件不遵循600的宽度。这是下面的代码,以及我在Acid测试平台上的电子邮件中看到的屏幕截图。除了所有Outlook,我的电子邮件在其他所有电子邮件客户端上看起来都很不错。只有在Outlook 2003 Windows 7上看起来不错的Outlook,我再也无法通过谷歌搜索为什么Outlook在电子邮件开发方面很烂!请任何建议和帮助都可以!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>All-Wall Abandoned Cart Email</title>
<!--[if gte mso 7]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
color: #000;
}
img {
max-width: 100%;
display: block;
border: 0;
outline: 0;
}
.collapse {
margin: 0;
padding: 0;
}
.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important;
clear: both !important;
background-color: #FFF;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table, .content table tr, .content table tr td {
max-width: 100%;
border-collapse: collapse;
border: 0;
outline: 0;
border-spacing: 0;
}
table {
width: 100%;
display: table;
}
.two-col table {
width: 300px;
}
.three-col table {
width: 200px;
}
.pad--left {
padding-left: 25px;
}
@media only screen and (max-width: 480px) {
.two-col table, .three-col table {
width: 100%;
}
.pad--left {
padding-left: 100px;
}
}
</style>
</head>
<body bgcolor="#ccc">
<table role="presentation" cellspacing="0" cellpadding="0">
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<tr>
<td>
<!-- HEADER -->
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td class="container">
<div class="content">
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 5px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="45" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone-icon.png" alt="phone icon" style="text-align: right; width: 45px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone-icon.png" alt="phone icon" style="width: 45px;"/ />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td style="padding-top: 15px; padding-bottom: 15px; padding-left: 5px; padding-right: 5px;">
<span style="font-weight: bold; color: #0067B9;">Need Help? Se habla español</span>
<br>
<a href="tel:8009290927" style="color: #000; text-decoration: none;">(800) 929-0927</a>
</td>
<td style="padding-top: 15px; padding-bottom: 15px; padding-left: 5px; padding-right: 15px;" align="right">
View email as <a href="%%!preview_url%% " style="font-weight: bold; color: #0067B9; text-decoration: none;">webpage</a>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td class="container">
<div class="content">
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 15px; padding-bottom: 45px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="243" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/All-Wall-LogoBanner.png" alt="cart image" style="text-align: right; width: 243px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/All-Wall-LogoBanner.png" alt="logo" />
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table role="presentation" cellspacing="0" cellpadding="0" style="background-image: linear-gradient(to right, #EFEFEF , #FFF); background-color: #EFEFEF;">
<tr>
<td align="center" style="padding-top: 40px;">
<img style="display:block;" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart-icon.png" alt="cart icon" />
</td>
</tr>
<tr>
<td align="center">
<h3 style="display: inline-block; font-weight: 400; font-size: 25px; padding-top: 5px; padding-bottom: 25px;">We've Saved Your Cart</h3>
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="30" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart.png" alt="cart image" style="text-align: right; width: 30px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/cart.png" alt="cart image" style="width:30px; display: inline-block;" />
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 25px;">
<a href="#" style="text-decoration: none; display: inline-block;"><span style="background-color: #FFF; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border: 2px solid #B30F11; color: #B30F11; font-weight: 500; display: block; margin-left: 10px; margin-bottom: 10px; margin-right: 10px; margin-right: 10px; font-size: 18px;">Shop Now</span></a>
<a href="#" style="text-decoration: none; display: inline-block;"><span style="background-color: #FFF; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border: 2px solid #B30F11; color: #B30F11; font-weight: 500; display: block; margin-left: 10px; margin-bottom: 10px; margin-right: 10px; margin-right: 10px; font-size: 18px;">View Cart</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style=" background-color: #EFEFEF; background-image: url(http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/worker-bg.png); background-repeat: no-repeat; background-size: cover; background-position: right; padding-top: 45px; padding-bottom: 85px; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; border: 0; color: #FFF; text-transform: uppercase; width: 100%;">
<h2 style="color: #FFF; text-transform: uppercase; font-size: 40px; padding-bottom: 15px;">Hurry while It’s<br>still in stock</h2>
<a href="#" style="text-decoration: none;"><span style="color: #FFF; text-transform: uppercase; font-size: 16px; font-weight: 600; display: block;">Return to your cart</span></a>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td class="three-col" style="padding-top: 15px; padding-bottom: 15px; background-color: #00549A; color: #FFF; text-transform: uppercase;">
<!--[if mso]>
<table role="presentation" width="33%"><tr><td></td></tr></table>
<div style="display:none">
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
<tbody>
<tr>
<td align="center" style="padding-left: 25px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/satisfaction.png" alt="satisfaction icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/satisfaction.png" alt="satisfaction icon" style="padding: 5px; display: block;" /></td>
<!--[if mso]>
</div>
<![endif]-->
<td align="left" style="color: #FFF; text-transform: uppercase;">Satisfaction<br>Guarantee</td>
</tr>
</tbody>
</table><!--[if mso]>
</div>
<![endif]--><!--[if mso]>
<table role="presentation" width="33%"><tr><td></td></tr></table>
<div style="display:none">
<![endif]--><table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
<tbody>
<tr>
<td align="center" style="padding-left: 25px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/fastship.png" alt="fast ship icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/fastship.png" alt="fast ship icon" style="padding: 5px; display: block;" /></td>
<!--[if mso]>
</div>
<![endif]-->
<td align="left" style="color: #FFF; text-transform: uppercase;">Fast<br>Shipping</td>
</tr>
</tbody>
</table><!--[if mso]>
</div>
<![endif]--><table role="presentation" cellspacing="0" cellpadding="0" style="display: inline-block;">
<tbody>
<tr>
<td align="center" style="padding-left: 25px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="48" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/freeship.png" alt="free ship icon" style="text-align: right; width: 48px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/freeship.png" alt="free ship icon" style="padding: 5px; display: block;" /></td>
<!--[if mso]>
</div>
<![endif]-->
<td align="left" style="color: #FFF; text-transform: uppercase;">Many items<br>Ship free</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-top: 65px; padding-bottom: 5px;padding-left: 15px; padding-right: 15px;">
<h3 style="font-size: 25px; text-transform: uppercase;">Customer Reviews</h3>
<hr style="margin: 15px 0;">
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-left: 35px; padding-right: 35px; padding-bottom: 15px; text-align: center;">
<table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td align="right" valign="bottom" style="vertical-align:top; font-size: 14px; font-weight: bold; display: inline-block; margin-right: 10px; padding-top: 5px;">Excellent</td>
<td align="center" valign="top" style="vertical-align:top; display: inline-block;margin-top: -3px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px; display: inline-block; padding-top: 5px;" />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td align="right" style="font-size: 12px; display: inline-block; padding-top: 5px;">1,880 reviews on </td>
<td align="center" style="display: inline-block; padding-top: 5px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="20" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/star.png" alt="five stars" style="text-align: right; width: 20px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/star.png" alt="star icon" style="padding: 1px; width: 20px; display: inline-block; margin-top: -7px; padding-top: 5px;" />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td align="left" style="font-size: 12px; display: inline-block; padding-top: 5px;"> Trustpilot</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-left: 45px; padding-right: 45px; padding-bottom: 35px;">
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size: 12px; padding-top: 25px; color: #707070;">
Brain Merryman • 2 reviews
<hr style="margin: 15px 0;">
</td>
</tr>
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td style="width: 115px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px;" />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td style="width: 20px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="16" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="text-align: right; width: 16px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="padding: 1px; width: 16px; " />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td style="font-size: 12px; color: #707070;">
<span>Verified</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 25px; padding-bottom: 25px;">
<h3 style="padding-bottom: 10px;">Had an awesome experience</h3>
<span style="font-size:14px; line-height: 22px;">Had an awesome experience. Product was great and shipping was fast</span>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size: 12px; padding-top: 25px; color: #707070;">
Jeff • 1 review
<hr style="margin: 15px 0;">
</td>
</tr>
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td style="width: 115px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="100" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="text-align: right; width: 100px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/five-stars.png" alt="five stars" style="padding: 1px; width: 100px;" />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td style="width: 20px;">
<!--[if mso]>
<table role="presentation" width="50%"><tr><td><img width="16" src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="text-align: right; width: 16px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/check.png" alt="checkmark" style="padding: 1px; width: 16px; " />
<!--[if mso]>
</div>
<![endif]-->
</td>
<td style="font-size: 12px; color: #707070;">
<span>Verified</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 25px; padding-bottom: 25px;">
<h3 style="padding-bottom: 10px;">Fast accurate order fulfillment.</h3>
<span style="font-size:14px; line-height: 22px;">Fast accurate order fulfillment. Very happy with All-Wall Equipment!!</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td class="two-col" style=" background-color: #EFEFEF; background-image: url(http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/support-bg.png); background-repeat: no-repeat; background-size: cover; padding-top: 85px; padding-bottom: 85px; padding-left: 25px; padding-right: 25px;">
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/phone.png" alt="phone" style="padding: 1px; width: 30px;" />
</td>
</tr>
<tr>
<td align="center" style="font-size: 30px;">
Customer Support
</td>
</tr>
<tr>
<td align="center" style=" padding-top: 10px; padding-bottom: 10px;">
<a href="tel:8009290927" style="color: #0067B9; font-size: 36px; font-weight: bold; text-decoration: none;">(800) 929-0927</a>
</td>
</tr>
<tr>
<td align="center" style="font-size: 16px; font-weight: bold; text-decoration: underline;">
Se Habla Español
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table role="presentation" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table role="presentation" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td align="center" style="padding-top: 45px; padding-left: 15px; padding-right: 15px;">
<a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/instagram.png" alt="instagram" style="padding: 1px; margin: 15px; width: 30px; height: 30px; display: inline-block;" /></a>
<a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/facebook.png" alt="facebook" style="padding: 1px; margin: 15px; width: 15px; height: 30px; display: inline-block;" /></a>
<a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/twitter.png" alt="twitter" style="padding: 1px; margin: 15px; width: 30px; height: 24px; display: inline-block;" /></a>
<a href="#" style="text-decoration: none;"><img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/youtube.png" alt="youtube" style="padding: 1px; margin: 15px; width: 30px; height: 22px; display: inline-block;" /></a>
</td>
</tr>
<tr>
<td align="center" style="padding-left: 15px; padding-right: 15px; font-weight: bold; font-size: 14px;">
Download our mobile app
</td>
</tr>
<tr>
<td align="center" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px;">
<a href="#" style="text-decoration: none;">
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/appstore.png" alt="appstore" style="padding: 1px; width: 140px; display: inline-block;" />
</a>
<a href="#" style="text-decoration: none;">
<img src="http://hosting-source.bm23.com/35348/public/Pictures/2020_Abandoned_Cart_Images/googleplay.png" alt="google play" style="padding: 1px; width: 140px; display: inline-block;" />
</a>
<hr style="margin-top: 45px; margin-bottom: 0px; width: 60%; margin-left: auto; margin-right: auto;">
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /FOOTER -->
</td>
</tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
</body>
</html>
几件事...
Outlook桌面不支持背景图像https://www.caniemail.com/search/?s=background-image,所以可能发生的是它采用600宽度并添加了填充。
因此,您可能希望(最简单)将图像制作成文字并成为图像。或者,如果可以管理它,则研究Outlook电子邮件的背景图片,以寻求最佳,最易访问的方法。但是,否则,请确保您在alt标签中包含文本,即<img alt="Hurry while stocks last" ... >
此外,Outlook仅考虑属性宽度。因此,请确保将其包括在内,例如<img width="500" ...>
尽管要使其对其他响应,您还需要包括内嵌width样式,这将覆盖width属性,例如<img width="500" style="width:100%;" ..>
所以您有600张宽的图片,但只给出了Outlook 580的宽。这也将其推出。
请确保您内联代码。 Outlook通常不看嵌入式CSS,而只看嵌入式CSS。即不要依赖<style>...</style>
中的代码,而是将其与代码内联使用,例如<div class="content" style="...">
。有在线工具可以帮助您。
最后,在测试时,您可以切出一个完整的部分,再次进行测试,看看是否可以解决。这样可以快速找到问题所在。