Outlook Client无法正确呈现表格边框 [英] Outlook Client not properly rendering table borders
问题描述
我一直在尝试将HTML电子邮件模板放在一起工作，它看起来很棒！...除Outlook桌面客户端外的所有内容.
I've been trying to put together an HTML email template for work, and it looks great! ...in everything except for the Outlook desktop client.
我尝试尽可能谨慎地使用基于表的布局，内联样式以及所有其他常见的问题.出于某种原因，我对Litmus/Email进行的酸性测试都返回了非常令人惊讶的Outlook结果，我不知道为什么.
I've tried to be as careful as possible with table-based layouts, inline styles, and all of the other usual culprits. For some reason, my Litmus/Email on Acid tests all come back with very surprising results for Outlook, and I've no idea why.
整个部分的边框比应该的要细，内部内容区域的边框完全丢失了，按钮周围的边框也丢失了！
The border around the entire section is slimmer than it ought to be, the border around the content area inside it is entirely missing, and the borders around the button are likewise missing!
我已将标记简化为以下相关代码段:
I've stripped down the markup to a relevant snippet below:
<!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中正确显示.这有点麻烦，但值得花一点精力.我要做的是生成想要的HTML，然后将其保存到文件中.我在MS Word中打开了文件(这并不奇怪，并且表行的大小完全错误).然后，我像修改任何其他文档一样修改了Word中的外观，以使其显示了我最初想要的方式，然后保存了文件.我在文本编辑器中打开该文件，然后将Word生成的HTML结构复制到我的应用程序中-从中生成的电子邮件完全按照我的预期方式显示.
There is one method that you could use to ensure your emails are structured to display properly in Outlook. It's a little cumbersome but the results are worth the small effort it takes. What I did was generate the HTML as I wanted it to look, then saved it to a file. I opened the file in MS Word (and no surprise it was skewed and the table rows were completely mis-sized). Then I modified the look in Word like any other document so that it displayed the way I originally wanted it to, then saved the file. I opened that file in a text editor and copied the HTML structure that Word generated into my app - the emails that were generated from that were displayed exactly the way I intended them to be.
这篇关于Outlook Client无法正确呈现表格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
