Outlook 表格宽度问题中的 HTML 电子邮件 - 内容比指定的表格宽度宽 [英] HTML email in outlook table width issue - content is wider than the specified table width
问题描述
我的 HTML 电子邮件模板在 Gmail、Apple Mail 和 iOS Mail 中正常显示，没有出现重大问题.然而，Outlook 是一个可怕的混乱，我一生都无法弄清楚我做错了什么???
我的电子邮件模板没有使用任何过于疯狂的 css 并使用表格进行布局，我对所有内容都有固定的像素宽度.
问题是，尽管我将容器设置为 580 像素，内部内容设置为 450 像素，但布局中的每个表格都拉伸到了 100%.
代码:
<!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"><头><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><!-- Facebook分享信息标签--><meta property="og:title" content="*|MC:SUBJECT|*"/><title>*|MC:SUBJECT|*</title><style type="text/css">/* 客户端特定样式 */#outlook a{padding:0;}/* 强制 Outlook 提供在浏览器中查看"按钮.*/body{width:100% !important;}/* 强制 Hotmail 以全宽显示电子邮件 */body{-webkit-text-size-adjust:none;}/* 防止 Webkit 平台更改默认文本大小.*//* 重置样式 */正文{边距:0;填充:0;}img{边框:无；字体大小:14px；字体粗细:粗体；高度:自动；行高:100%；大纲:无；文字装饰:无；文本转换:大写；}</风格><body bgcolor="#444444"><中心><table border="0" cellpadding="0" cellspacing="0" width="580px" style="background-color: #0290ba;"><tr><td align="center" valign="top"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/header.png" width="580px"/></td></tr><tr><td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="450px"><tr><td align="center" valign="top" width="450px"><br/><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/hello_header.png" width="450px"/></td></tr><table border="0" cellpadding="0" cellspacing="0" width="450px"><tr><td align="center" valign="top" width="214px"><br/><div style="color:#004c63; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic;">我们将自己视为您业务中的合作伙伴，其特定目的是使您的利润增长.</td><td width="236px"></td></tr><table border="0" cellpadding="0" cellspacing="0" width="450px"><tr><td align="center" valign="top" width="214px"><p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">在过去的 2 1/2 年里，我们一直非常忙于启动和运行我们的业务，忙于为我们的客户开展日常和长期项目.但我们注意到并不是每个人都知道我们所做的所有很酷(不是很酷但同样重要)的事情.所以我们要炫耀一下，告诉你更多关于我们所做的事情，这样你就可以从我们广泛的技能、服务和经验中受益.这封电子邮件是该过程的开始:我们将向您展示一个小(我们不想用太多东西惹恼您)但每个 <!-- 月的多样化项目选择，希望能激发您的灵感.然后，如果您想了解有关我们如何为您做类似事情的任何信息或想法，请告诉我们 - 我们很乐意提供帮助！我们也在为自己建立一个新网站(最终) - 我们会在网站上线时通知您，但同时请查看我们的临时页面 - 在这里.--></p></td><td width="236px"><p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/world-icon-image.png" width="110%" style="margin-left: 20px;"/></p><br/></td></tr></td></tr><tr style="background-color: #d82445;"><td align="center" valign="top"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/divider_showcase.png" width="580px"/></td></tr><tr style="background-color: #d82445;"><td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="450px"><tr><td> </td></tr><tr><td valign="top" width="124px"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px"/></td><td width="10px"></td><td><table border="0" cellpadding="0" cellspacing="0" width="316px"><tr><td valign="top"><div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;>标题在这里
</td></tr><tr><td valign="top" width="150px"><p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerciation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.杜伊斯奥特姆.</p></td><td width="10px"></td><td valign="top" width="160px"><p style="margin-top: 20px;"><a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top:-10px;"/></a><br/><br/><a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png"/></a></p></td></tr></td></tr><tr><td> </td></tr><tr><td valign="top" width="124px"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px"/></td><td width="10px"></td><td><table border="0" cellpadding="0" cellspacing="0" width="316px"><tr><td valign="top"><div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;>标题在这里
</td></tr><tr><td valign="top" width="150px"><p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;">Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerciation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.杜伊斯奥特姆.</p></td><td width="10px"></td><td valign="top" width="160px"><p style="margin-top: 20px;"><a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top:-10px;"/></a><br/><br/><a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png"/></a></p></td></tr></td></tr><tr><td> </td></tr><tr><td valign="top" width="124px"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px"/></td><td width="10px"></td><td><table border="0" cellpadding="0" cellspacing="0" width="316px"><tr><td valign="top"><div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;>标题在这里