Outlook客户端未正确呈现表格边框
Outlook客户端未正确呈现表格边框
提问于 2017-04-18 09:41:54
我一直在尝试建立一个超文本标记语言的电子邮件模板，它看起来很棒！...in除了Outlook桌面客户端之外的所有东西。
我已经尝试尽可能小心地使用基于表的布局、内联样式和所有其他常见的错误。出于某种原因，我的Litmus/Email on Acid测试都在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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet">
<title>New Event Template Test</title>
</head>
<body bgcolor="#f8f8f8" style="background:#f8f8f8;margin:0;padding:0;"><a name="top" data-hs-link-id="0" target="_blank"></a>
<!-- framing wrapper -->
<table background="#f8f8f8" style="border-collapse:separate; padding-top:38px" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td width="100%" align="center" class="body__table" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<!--[if mso]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper__table" background="#f8f8f8">
<![endif]-->
<!--[if !mso]><!-- -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate; background:#f8f8f8; max-width:600px" class="wrapper__table" background="#f8f8f8">
<!--<![endif]-->
<tbody><tr><td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<!-- hero -->
<table width="100%" align="left" cellpadding="0" cellspacing="0" border="10" bordercolor="#ffffff" bordercolorlight="#ffffff" bordercolordark="#ffffff" class="hero__table" style="border-collapse:separate; background:#f5f7f6; border-left:10px solid #ffffff; border-right:10px solid #ffffff; border-top:10px solid #ffffff; border-bottom:0px solid #ffffff; border-color:#ffffff">
<tbody><tr>
<td class="hero__content" background="" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<table class="hero__content--table" width="100%" align="left" cellpadding="0" cellspacing="0" border="30" bordercolor="#F5F7F6" bordercolorlight="#F5F7F6" bordercolordark="#F5F7F6" background="#F5F7F6" style="border-collapse:separate; background:#f5f7f6; border:30px solid #f5f7f6">
<tbody><tr><td class="hero--subhead__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px">
<div class="hero--subhead" style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"><span class="block-mobile">Webinar: </span>03/08 at 10:00AM - 12:00PM PST</div>
</td></tr>
<tr><td class="heroHeaderColumn" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px">
<h1 class="hero--header" style="font-size:36px; line-height:45px; margin:0"><div id="hs_cos_wrapper_hero_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></h1>
</td></tr>
<tr><td class="hero--button__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px">
<a class="email-button" style="text-transform:uppercase; letter-spacing:1.8px; font-size:14px; font-weight:bold; text-decoration:none; background-color:#252525; border-left:38px solid #252525; border-right:38px solid #252525; border-top:12px solid #252525; border-bottom:12px solid #252525; background:#252525; color:#FFFFFF" href="http://google.com" bgcolor="#252525" data-hs-link-id="0" target="_blank">This is a button</a>
</td></tr>
</tbody></table>
</td>
</tr>
<tr><td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<img class="hero__image" src="https://dummyimage.com/1160x676/cccbcb/252525.jpg&text=image" width="580" style="vertical-align:text-top; max-width:580px">
</td>
</tr></tbody>
</table>
<!-- /framing wrapper -->
</td></tr></tbody></table>
</td></tr></tbody></table>
</body></html>和屏幕截图：
Outlook 2016 (OS X) - Happy！
Outlook 2007 (Windows) -我的边框去了哪里？
回答 2
Stack Overflow用户
发布于 2019-02-22 00:41:34
有一种方法可以确保您的电子邮件结构正确地显示在Outlook中。这有点麻烦，但结果是值得的，它所需要的小努力。我所做的是生成我想要的HTML，然后将其保存到一个文件中。我在MS Word中打开了这个文件(毫不奇怪，它是倾斜的，表行的大小完全错误)。然后，我像其他文档一样修改了Word中的外观，使其以我最初希望的方式显示，然后保存文件。我在文本编辑器中打开该文件，并将Word生成的HTML结构复制到我的应用程序中-生成的电子邮件完全按照我预期的方式显示。
Stack Overflow用户
发布于 2017-04-19 17:09:20
我对你的代码做了一点修改，并在Litmus中进行了测试，现在它似乎可以很好地处理outlook中的边界问题。
应避免将边框样式添加到table标记。相反，将其应用于周围的td。
另外，避免使用border="30"，这里应该只使用值0和1。
谢谢,
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet">
<title>New Event Template Test</title>
</head>
<body bgcolor="#f8f8f8" style="background:#f8f8f8;margin:0;padding:0;">
<a name="top" data-hs-link-id="0" target="_blank"></a>
<!-- framing wrapper -->
<table background="#f8f8f8" style="border-collapse:separate; padding-top:38px" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" align="center" class="body__table" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<!--[if mso]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper__table" background="#f8f8f8">
<![endif]-->
<!--[if !mso]><!-- -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate; background:#f8f8f8; max-width:600px" class="wrapper__table" background="#f8f8f8">
<!--<![endif]-->
<tbody>
<tr>
<td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:10px solid #ffffff;">
<!-- hero -->
<table width="100%" align="left" cellpadding="0" cellspacing="0" border="0" bordercolor="#ffffff" bordercolorlight="#ffffff" bordercolordark="#ffffff" class="hero__table" style="border-collapse:separate; background:#f5f7f6; border-color:#ffffff">
<tbody>
<tr>
<td class="hero__content" background="" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;border:30px solid #f5f7f6;">
<table class="hero__content--table" width="100%" align="left" cellpadding="0" cellspacing="0" border="0" bordercolor="#F5F7F6" bordercolorlight="#F5F7F6" bordercolordark="#F5F7F6" background="#F5F7F6" style="border-collapse:separate; background:#f5f7f6;">
<tbody>
<tr>
<td class="hero--subhead__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px">
<div class="hero--subhead" style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"><span class="block-mobile">Webinar: </span>03/08 at 10:00AM - 12:00PM PST</div>
</td>
</tr>
<tr>
<td class="heroHeaderColumn" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px">
<h1 class="hero--header" style="font-size:36px; line-height:45px; margin:0"><div id="hs_cos_wrapper_hero_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></h1>
</td>
</tr>
<tr>
<td class="hero--button__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px">
<a class="email-button" style="text-transform:uppercase; letter-spacing:1.8px; font-size:14px; font-weight:bold; text-decoration:none; background-color:#252525; border-left:38px solid #252525; border-right:38px solid #252525; border-top:12px solid #252525; border-bottom:12px solid #252525; background:#252525; color:#FFFFFF" href="http://google.com" bgcolor="#252525" data-hs-link-id="0" target="_blank">This is a button</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<img class="hero__image" src="https://dummyimage.com/1160x676/cccbcb/252525.jpg&text=image" width="580" style="vertical-align:text-top; max-width:580px">
</td>
</tr>
</table>
<!-- /framing wrapper -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43462203
复制相关文章
相似问题
腾讯云开发者
