这就是我的电子邮件在浏览器中的显示方式 When I open the email
浏览器添加随机结束div ...
当我将html代码放入文件时，这就是电子邮件的外观 Html code in a file
当电子邮件超过一定高度时是否有规则，浏览器会将邮件拆分为单独的div？
整个html代码（idk为什么doctype没有出现在代码块中......）
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#eeeeee;
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
-webkit-text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6 {
color:#39434d !important;
margin-bottom:10px !important;
}
a, a:link, a:visited {
color:#777777;
text-decoration:none;
border-bottom:1px #777777 dotted;
}
a:hover, a:active {
text-decoration:none;
color:#0f79aa !important;
border-bottom:1px #0f79aa dotted !important;
}
img {
border:0;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.yshortcuts { color: #999999 }
.yshortcuts a span { color: #777777 }
</style>
</head>
<body link="#777777" vlink="#777777">
<table id="container" align="center" cellpadding="0" cellspacing="0" style="width: 100%; margin:0; padding:0; background-color:#eeeeee;">
<tr>
<td style="padding:0 20px;">
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td style="color:#ffffff; padding:20px 0;">
<img align="left" border="0" vspace="0" hspace="0" alt="Logo" src="http://ui-dev.reslynx.com/img/mail/logo-voyage-en-direct.png"></td>
<td width="100" style="padding:20px 0;" valign="bottom">
<!-- <img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow.gif" width="10" border="0"><a style="border-bottom:1px #2a8fbd dotted; text-decoration:none; color:#2a8fbd;" href="#">View online</a>-->
</td>
<td width="100" style="padding:20px 0;" valign="bottom">
<!--<img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow.gif" width="10" border="0"><a style="border-bottom:1px #2a8fbd dotted; text-decoration:none; color:#2a8fbd;" href="#">Forward</a>-->
</td>
</tr>
</table>
<!--End of Logo and view online | forward links-->
<!--Start of main content container - row#1-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" valign="top">
<img alt="image" height="130" src="http://ui-dev.reslynx.com/img/mail/travel.png" width="620" border="0" align="left" vspace="0" hspace="0" style="display:block;"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h1 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:18px; line-height:20pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Confirmation de votre <span style="font-weight:bold; color:#2a8fbd;">Commande</span> de billets d'avion</h1><br/>
Votre numéro de confirmation pour cette commande est le : 2270657<br/><br/>
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">
Vous pouvez également consulter les <span style='color:#2a8fbd;'>détails</span> de votre commande en cliquant sur le lien suivant : <a href="http://voyagesbergeron-dev.reslynx.com/invoice/ae73251458f68d73f88db47aee81cc771454703156/2270657/LRD9CI">Détail</a>
</h2>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of main content container - row#1-->
<!--Start of three content container - row#4-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:10px 20px 15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Détail sur le <span style='color:#2a8fbd;'>vol</span> enregistré:</h2>
<div style="border:1px solid grey">
<table width="580" >
<tr>
<td><img src="http://ui-dev.reslynx.com/img/airlines/UA.jpg" onerror="this.src='http://ui-dev.reslynx.com/img/airlines/default.jpg'" style="max-width:24px;" />
United Airlines
</td>
<td style="text-align:center">
<b>07:00</b><br/>
YUL
</td>
<td>
6h 24min
</td>
<td>
<img src="http://ui-dev.reslynx.com/img/airplane-mode.png" alt="Un avion" style="width:20px;height:20px;display:block;" vspace="0" />
</td>
<td style="text-align:center">
<b>13:24</b><br/>
MIA
</td></tr><tr>
<td style="border-top:1px solid #E3E8EA">
<img src="http://ui-dev.reslynx.com/img/airlines/UA.jpg" onerror="this.src='http://ui-dev.reslynx.com/img/airlines/default.jpg'" style="max-width:24px;" />
United Airlines
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center">
<b>07:00</b><br/>
YUL
</td>
<td style="border-top:1px solid #E3E8EA">
9h 19min
</td>
<td style="border-top:1px solid #E3E8EA">
<img src="http://ui-dev.reslynx.com/img/airplane-mode-inbound.png" alt="Un avion" style="width:20px;height:20px;display:block;" vspace="0" />
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center">
<b>13:24</b><br/>
MIA
</td>
</tr></table>
</div>
<p>Date de départ : 05 Mars 2016 Montreal Vers </p><p>Date de retour : 12 Mars 2016 Vers Montreal</p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of three content container - row#4-->
<!--Start of three content container - row#4-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="padding:10px 20px 15px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<h2 style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:17pt; color:#39434d; font-weight:lighter; margin-top:0; margin-bottom:10px !important;">Détail sur le(s) <span style='color:#2a8fbd;'>passager(s)</span> enregistré(s):</h2>
<div style="border:1px solid grey">
<table width="580" ><tr><td><img align="left" alt="image" border="0" hspace="0" src="http://ui-dev.reslynx.com/img/mail/man.png" height="32" width="32" style="display: block;" vspace="0"></td><td>Mr Roofus Summers</td><td style="text-align:center"><b>16 August 1987 (28)</b></td><td style="text-align:center"><b><span style="color:#2a8fbd;">$292.11</span></b></td></tr><td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b>Total</b>
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center;">
<b><span style="color:#2a8fbd;">$292.11</span></b>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of three content container - row#4-->
<!--Start of footer container-->
<table width="620" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; text-align:left; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; line-height:15pt; color:#999999; margin:0 auto;">
<tr>
<td bgcolor="#f4f4f4" height="5" style="font-size:2px; line-height:0px;" valign="top">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopLeft2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderTopRight2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" style="padding:12px 20px 12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="580" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td width="180" valign="top" style="padding:0 20px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="180" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td valign="top" width="20" style="padding:0 0 0 0; line-height:100%;"><img border="0" alt="Home:" height="12" src="http://ui-dev.reslynx.com/img/mail/homeIcon.gif" width="11"></td>
<td width="160" style="padding:0 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">www.website.com</a></td>
</tr>
<tr>
<td valign="top" width="20" style="padding:2px 0 0 0; line-height:100%;"><img border="0" alt="Email:" height="9" src="http://ui-dev.reslynx.com/img/mail/emailIcon.gif" width="12"></td>
<td width="160" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="mailto:#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">email@website.com</a></td>
</tr>
</table>
</td>
<td width="180" valign="top" style="padding:0 20px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
<table width="180" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; border-width:0;">
<tr>
<td valign="top" width="16" style="padding:1px 0 0 1px; line-height:100%;"><img border="0" alt="Phone:" height="10" src="http://ui-dev.reslynx.com/img/mail/phoneIcon.gif" width="7"></td>
<td width="160" style="padding:0 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#777777;" valign="top">
1.234.567.8901</td>
</tr>
<tr>
<td valign="top" width="16" style="padding:3px 0 0 1px; line-height:100%;"><img alt="-" height="7" src="http://ui-dev.reslynx.com/img/mail/arrow2.gif" width="7" border="0"></td>
<td width="160" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:100%; color:#999999;" valign="top">
<a href="#" style="border-bottom:1px #777777 dotted; text-decoration:none; color:#777777;">Manage subscription</a></td>
</tr>
</table>
</td>
<td width="180" valign="top" style="padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15pt; color:#999999;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#F4F4F4" height="5" style="font-size:2px; line-height:0px;" valign="bottom">
<table width="620" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border-spacing: 0; margin:0; padding:0; line-height:0px;">
<tr>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomLeft2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
<td valign="top" height="5" width="610" style="font-size:2px; line-height:0px;"></td>
<td valign="top" height="5" width="5" style="font-size:2px; line-height:0px;"><img alt="" height="5" src="http://ui-dev.reslynx.com/img/mail/borderBottomRight2.gif" width="5" align="right" vspace="0" hspace="0" border="0" style="display:block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="font-size:2px; line-height:2px;"><img alt="" height="20" src="http://ui-dev.reslynx.com/img/mail/shadow620.gif" width="620" border="0" style="display:block;"></td>
</tr>
</table>
<!--End of footer container-->
</td>
</tr>
<!-- End of main container -->
</table>
</body>
</html>
答案 0 :(得分：1)
我认为可能是由于某些验证错误造成的：
1。）最重要的是你错过了<tr>标签，这可能导致了奇怪的行为。如果HTML关闭，大多数预处理器将尝试解决它们认为应该如何解决的问题。这可以使一些看起来像热的混乱。请参阅下面的TR缺失的片段。它就在<td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b><span style="color:#2a8fbd;">$292.11</span></b></td></tr><tr><td colspan="3" style="border-top:1px solid #E3E8EA;text-align:right;">
<b>Total</b>
</td>
<td style="border-top:1px solid #E3E8EA;text-align:center;">
<b><span style="color:#2a8fbd;">$292.11</span></b>
</td>
</tr>
2。）您还使用单引号作为某些span样式标记。这不是有效的HTML，它不会引起重大问题，因为大多数处理器都宽容它 - 但所有HTML属性都应使用双引号以获得最佳效率。