HTML 电子邮件、表格和内容 cropped/collapsed 自身（Outlook）
HTML email, tables and content are cropped/collapsed on themselves(Outlook)
我正在处理一封 HTML 工作电子邮件。我已经 10 多年没有这样做了，在我的一生中，在阅读并重新学习 html 电子邮件（排序）的“方式”之后，我无法弄清楚为什么我的 HTML table 自己倒塌了。
我已经检查了不同的设备和桌面应用程序，到目前为止一切正常，除了 Outlook。
在 outlook 中，我的电子邮件被压缩了。它是这样显示的
这是邮件的一部分。
（由于工作隐私问题，我删除了一些内容，但基本上都在那里）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px; line-height:18px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px; line-height:18px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
我试过将硬高度设置为 table (TD)，我试过通过 css 内联设置高度，...没有。
我感觉是行高导致了问题。我已将其从您的代码及其下方删除。让我知道它是否适合你。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
我正在处理一封 HTML 工作电子邮件。我已经 10 多年没有这样做了，在我的一生中，在阅读并重新学习 html 电子邮件（排序）的“方式”之后，我无法弄清楚为什么我的 HTML table 自己倒塌了。
我已经检查了不同的设备和桌面应用程序，到目前为止一切正常，除了 Outlook。
在 outlook 中，我的电子邮件被压缩了。它是这样显示的
这是邮件的一部分。 （由于工作隐私问题，我删除了一些内容，但基本上都在那里）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; line-height:0; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px; line-height:18px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px; line-height:18px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px; line-height:18px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
我试过将硬高度设置为 table (TD)，我试过通过 css 内联设置高度，...没有。
我感觉是行高导致了问题。我已将其从您的代码及其下方删除。让我知道它是否适合你。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>TITLE HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
table td {border: 0px solid #DDDDDD;}
.ReadMsgBody { width: 100%; background-color: #F1F1F1; }
.ExternalClass { width: 100%; background-color: #F1F1F1; }
body { width: 100%; background-color: #f6f6f6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-family: Arial, Times, serif }
*[class*="mobileOn"] { display: none !important; max-height: none !important; }
@-ms-viewport{ width: device-width; }
.smdWidth{width:600px;}
.smdPadding{padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 639px){
.wrapper{ width:100%; padding: 0 !important; }
}
@media only screen and (max-width: 480px){
p{padding:10px;}
.wrapper, .smdWidth{ width:320px; padding: 0 !important; }
.centerClass{ margin:0 auto !important; }
.imgClass{width:100% !important; height:auto;}
.container{ width:300px; padding: 0 !important; }
.mobile{ width:300px; display:block; padding: 0 !important; text-align:center; }
.mobile50{ width:300px; padding: 0 !important; text-align:center; }
*[class="mobileOff"] { width: 0px !important; display: none !important; }
*[class*="mobileOn"] { display: block !important; max-height: none !important; }
table, td{width:320px !important; text-align:center !important; margin:0px auto;}
}
</style>
<!--[if gte mso 15]>
<style type="text/css">
table { font-size:1px; mso-margin-top-alt:1px;mso-line-height-rule: exactly; }
* { mso-line-height-rule: exactly; }
</style>
<![endif]-->
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" yahoo="fix" style="background-color:#F2F2F2; font-family:Arial,serif;margin:0;padding:0;min-width: 100%; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center">
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="550" class="mobile" style="font-size:12px;">
<img src="IMAGE SOURCE HERE" alt="">
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
<td width="50" class="mobile" style="font-size:12px;">
<a href="LINK HERE"><img src="IMAGE SOURCE HERE" alt=""></a>
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
<!-- Start Wrapper -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper smdWidth" bgcolor="#FFFFFF" align="center" >
<tr>
<td align="center">
<!-- Start Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container smdWidth">
<tr>
<td width="600" height="199" class="mobile smdWidth" style="font-size:12px;">
<img style="width:100%; height:199px; display:block;" class="smdBanner" src="IMAGE SOURCE HERE" alt="">
</td>
</tr>
</table>
<!-- Start Container -->
</td>
</tr>
</table>
<!-- End Wrapper -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>