【问题标题】:Outlook causing table rows to overlap and get cut offOutlook 导致表格行重叠并被切断
【发布时间】:2017-08-28 20:01:28
【问题描述】:

有没有人知道是什么原因导致此 HTML 电子邮件在除 Outlook 之外的所有客户端和浏览器中都能正常显示?标题被顶部的徽标截断,社交媒体图标在“关注我们”下方被截断。

我已经包含了特定于这些行的代码:

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: left;"><!--
        Set the email width. Defined in two places:
        1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
        2. MSO tags for Desktop Windows Outlook enforce a 600px width.
    -->

<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
        <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
        <tr>
        <td>
        <![endif]--><!-- Email Header : BEGIN -->

<tr>
    <td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;">&nbsp;</td>
</tr>

<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">

    <tr>
        <td style="text-align: center" class=""><img alt="logo" aria-hidden="true" border="0" src="logo.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td>
    </tr>
</table>
<tr>
    <td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;">&nbsp;</td>
</tr>

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
    <tr>
        <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td>
    </tr>
    <tr>
        <td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;">
        <h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br>
        </td>
    </tr>

    <tr>
        <td height="27" style="font-size: 0; line-height: 0; min-height: 27px;">&nbsp;</td>
        </tr>
        <tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;">
        <a href="link"><img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link">
        <img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td>
    </tr>
    <tr>
        <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td>
    </tr>
</table>

【问题讨论】:

    标签: html outlook html-table row html-email


    【解决方案1】:

    您的代码存在许多问题。你让 tr 开始时没有桌子,div 开始但没有关闭,桌子下面没有 td 或 tr。我已经对您的 html 进行了更改以解决上述问题,如果它现在可以工作,请告诉我。

    	<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
    	<center style="width: 100%; background: #ffffff; text-align: left;"><!--
    	Set the email width. Defined in two places:
    	1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
    	2. MSO tags for Desktop Windows Outlook enforce a 600px width.
    	-->
    
    	<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
    	<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
    	<tr>
    	<td>
    	<![endif]--><!-- Email Header : BEGIN -->
    	<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
    	<tr>
    	<td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;">&nbsp;</td>
    	</tr>
    	<tr><td>
    	<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
    
    	<tr>
    	<td style="text-align: center" class=""><img alt="BalanceWorks" aria-hidden="true" border="0" src="http://www2.eniweb.com/l/50342/2017-03-31/8dx33b/50342/153983/BalanceWorks_Transparent.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td>
    	</tr>
    	</table>
    	</td></tr>
    	<tr>
    	<td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;">&nbsp;</td>
    	</tr>
    	<tr><td>
    	<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" aria-hidden="true" role="presentation">
    	<tr>
    	<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td>
    	</tr>
    	<tr>
    	<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;">
    	<h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br>
    	</td>
    	</tr>
    
    	<tr>
    	<td height="27" style="font-size: 0; line-height: 0; min-height: 27px;">&nbsp;</td>
    	</tr>
    	<tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;">
    	<a href="link"><img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link/l/50342/2017-03-31/8dv136/50342/153855/linkedin.png" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link">
    	<img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td>
    	</tr>
    	<tr>
    	<td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td>
    	</tr>
    	</table>
    	</td></tr></table></div>
    	</body>

    干杯

    【讨论】:

    • 对不起。我只粘贴了不起作用的代码部分,但我可以保留父元素。谢谢你。看起来将 em 更改为 px 为我修复了它,但随后您的表格 align="center" 修复了对齐方式!
    猜你喜欢
    • 1970-01-01
    • 2023-03-17
    • 2019-04-15
    • 2018-07-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-16
    • 1970-01-01
    相关资源
    最近更新 更多