【发布时间】：2014-04-28 16:59:28
【问题描述】：
我正在尝试在所有电子邮件客户端中正确显示电子邮件营销活动。我已经尝试了很多修复和方法来让我的电子邮件显示写入。我让它在大多数电子邮件客户端上运行得相当好，并且我已经在 acid 和 Campaign 监视器上的电子邮件上对其进行了测试，但他们没有告诉我们我的代码有什么问题，他们只是向我展示了一张不太有用的图片。
我认为主要问题之一是由于某种原因，电子邮件在 Outlook 2007 及更高版本中扩展为全宽，我无法使用 Max-Width 属性，因此我需要一些帮助。
我想知道是否有人可以提供帮助并查看我的代码中明显错误且需要修复的任何内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Go City - Email</title>
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
table {border-collapse: collapse;}
a:hover {text-decoration: none !important;}
a {color: #fff !important;text-decoration: none !important;}
p {font-size: 14px;line-height: 24px;font-family: arial, 'veranda', san-serif !important;color: #333333 !important;margin: 0px;}
span.yshortcuts {color: #000;background-color: none;border: none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color: #000;background-color: none;border: none;}
img {border: none !important;display:block;}
.book {background: white;}
.body {max-width: 300px;}
</style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" style="background-repeat:no-repeat;position:static;height:100%;width:100%;background-image:url('background-new.jpg');background-color:#000000;margin-top:0px;max-width: 630px !important;margin: auto;" bgcolor="#000000" leftmargin="0">
<!-- Outlook Bacground Image -->
<div style="background-color:#000000; max-width:630px !important;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="url('background-new.jpg')" color="#000000"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="#fff"><!-- Outlook Bacground Image End -->
<!--100% body table-->
<table cellspacing="0" align="center" border="0" cellpadding="15" width="600" bgcolor="#000000" style="margin:auto;" >
<tr>
<td align="center"><!--top links-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:20px;">
<tr height="100">
<td valign="middle" align="left" width="40%"><a href="https://gocityhotels.com/" style="text-decoration:none !important;color:#fff !important;" ><img src="go-city-hotels-logo.jpg" style="display:block;" vspace="0" hspace="0" alt="Go City Hotels Logo" /></a></td>
<td valign="middle" align="right" width="60%" style="text-align:center;"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" >
For Better Viewing Results <webversion style="text-decoration:none;color:#10aeea !important;">Please View Online</webversion><br />
<forwardtoafriend style="text-decoration:none;color:#ffffff;" href="#">Forward</forwardtoafriend>
|
<unsubscribe style="text-decoration:none;color:#ffffff;" href="#">Unsubscribe</unsubscribe>
</p></td>
</tr>
</table>
<!--email container-->
<table bgcolor="#000000" cellspacing="0" border="0" align="center" cellpadding="30" width="600">
<tr>
<td style="padding:0px;"><!--email content-->
<table cellspacing="0" border="0" id="email-content" cellpadding="0" width="100%">
<tr>
<td><repeater>
<!--section 1-->
<layout label="Full Width Image">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Full Width Image" /></td>
</tr>
</table>
</layout>
<!--/section 1-->
<!--section 2-->
<layout label="Colour Title">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:40px;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;background-color:#10aeea;">
<singleline label="Title">Lorem ipsum</singleline>
</h1></td>
</tr>
</table>
</layout>
<!--/section 2--><!--section 3-->
<layout label="Body Text">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="center"><p style="margin:0px;color:#ffffff !important;font-family:arial, 'veranda', san-serif !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</multiline>
</p></td>
</tr>
</table>
</layout>
<!--/section 3-->
<!--section 2--><layout label="3 Hotel Booking">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td>
<table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
<tr>
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
<!-- Table Padding --><td valign="top" background="#000000"></td><!-- Table Padding END -->
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
<!-- Table Padding --><td valign="top" background="#000000"></td><!-- Table Padding END -->
<td bgcolor="#ffffff" valign="top" style="border-radius: 5px;width: 30%;max-width: 30%;"><p style="margin:0px;font-size:14px;text-align:center;" ><img editable src="" style="margin-top:10px !important;margin-bottom:10px !important;" vspace="0" hspace="0" alt="Image 3" width="100%" label="Image Left" /></p>
<p style="color:#333333 !important; font-family:arial, 'veranda', san-serif; text-align:left;" >
<multiline style="color:#333333 !important;" label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</multiline></p>
<p style="margin:0px;line-height:24px;font-size:14px;font-family:arial, 'veranda', san-serif;margin-top:20px;padding:5px;text-align:center;border-radius:5px;border:1px solid #0d8cbc;background-color:#10aeea;color:#ffffff !important;text-decoration:none !important;" >
<singleline style="color:#ffffff !important;" label="Book Now" >Book Now</singleline>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table></layout><!--/section 2-->
<!--section 1-->
<layout label="Plain Title">
<table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" align="left"><h1 style="font-weight:bold;mso-line-height-rule:exactly;line-height:2;margin-bottom:10px;margin-top:0px;font-family:arial, 'veranda', san-serif;color:#ffffff;font-size:25px;">
<singleline label="Title">Lorem ipsum</singleline>
</h1></td>
</tr>
</table>
</layout>
<!--/section 1--><!--section 5-->
<layout label="Image Right">
<table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;">
<tr>
<td><table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" width="50%"><p style="text-align:right;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. Aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline>
</p></td>
<td valign="top" width="50%" style="padding-left:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="Image 4" width="100%" label="Image Right" /></td>
</tr>
</table></td>
</tr>
</table>
</layout>
<!--/section 5--><!--section 3-->
<layout label="Image Left">
<table cellspacing="0" border="0" cellpadding="0" width="100%" style="margin:10px 0px;">
<tr>
<td><table cellspacing="0" border="0" cellpadding="0" width="100%">
<tr>
<td valign="top" width="50%" style="padding-right:10px;"><img editable src="" vspace="0" hspace="0" style="display:block;" alt="Image 5" width="100%" label="Image Left" /></td>
<td valign="top" width="50%"><p style="text-align:left;margin:0px;color:#ffffff !important;mso-line-height-rule:exactly;line-height:22px;font-size:16px;font-family:arial, 'veranda', san-serif;" >
<multiline label="Main Body Text">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. Aliquam dolor dolor, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</multiline>
</p></td>
</tr>
</table></td>
</tr>
</table>
</layout>
<!--/section 3--></repeater></td>
</tr>
</table>
<!--/email content--></td>
</tr>
</table>
<!--/email container--><!--footer-->
<table width="600" border="0" align="center" cellpadding="30" cellspacing="0">
<tr>
<tr style="margin-top:20px;">
<hr style="margin-top:30px;border:1px solid #353535 !important;" />
</tr>
<td valign="top"><p style="margin:0px;color:#353535 !important;font-family:arial, 'veranda', san-serif;line-height:24px;font-size:14px;" > You’re receiving this newsletter because you’ve subscribed to our newsletter<br />
Not interested anymore?<br />
<unsubscribe style="text-decoration:none;color:#10aeea !important;" href="#" >Unsubscribe instantly.</unsubscribe>
</p></td>
<td valign="top" ><a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:43px;width:42px;" href="https://www.facebook.com/pages/gocityhotelscom/343073452495484"> <img style="display:block;" alt="Facebook Image" vspace="0" hspace="0" src="facebook-mini-icon.jpg" /></a> <a style="text-decoration:none !important;color:#fff !important;margin:5px;position:relative;float:right;display:block;height:42px;width:42px;" href="https://twitter.com/gocityhotels"> <img style="display:block;" vspace="0" hspace="0" alt="Twitter Image" src="twitter-mini-icon.jpg" /></a></td>
</tr>
</table>
<!--/footer--></td>
</tr>
</table>
<!--/100% body table--></td>
</tr>
</table>
</div>
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
a:hover {text-decoration: none !important;}
a { color:#fff !important; text-decoration: none !important;}
p {font-size: 14px; line-height: 24px; font-family: arial, 'veranda', san-serif !important; color: #ffffff !important; margin: 0px;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {color:#000; background-color:none; border:none;}
</style>
</body>
</html>
任何人都可以推荐任何服务，让您检查代码或类似的东西来真正解决根本问题，而不是仅仅进行随机修复。
【问题讨论】：
-
如果您查看 mailchimp 等服务，它们可以向您展示邮件在大量客户端中的外观
-
是的，谢谢您的回复，我已经这样做了，但它并没有告诉我为什么我的广告系列显示不正确，这不是很有帮助。
标签： email outlook outlook-2010 outlook-2007 outlook-2013