如何替换 HTML Table 中样式化的 <p> 标签以便在 Outlook 中使用

Question

如何才能实现您在下面看到的用于 Outlook 段落元素的相同样式效果？正如您可能知道的那样，Outlook 不支持填充并且通常对段落标记的处理非常糟糕。无论如何，在 Outlook 中，段落元素水平延伸到 table 的两个边缘。我已经成功地使用了 margin-left 和 margin-right 但只有在我删除填充的情况下！

我认为我需要一起摆脱段落元素，只使用 table 单元格作为文本容器，甚至在单元格标记内创建另一个 table 但我有麻烦造型的任何一种可能性。我在这里绕了一圈，需要与所有电子邮件客户端兼容的正确解决方案。

<body style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<div style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
        <tr>
            <td align="center" valign="top" style="padding:20px 0 4px 0">
                <!-- [ header starts here] -->
                <table bgcolor="FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:3px solid #E0E0E0;">
                    <tr>
                        <td valign="top" align="center">
                            <a href="{{store url=""}}"><img src="{{var logo_url}}" alt="{{var logo_alt}}" width="351" height="51" /></a></td>
                    </tr>
                <!-- [ middle starts here] -->
                    <tr>
                        <td valign="top">
                           <p style="border:2px solid #E0E0E0; font-size:12px; line-height:16px; background:#F9F9F9; padding: 16px 18px;"> Welcome, {{htmlescape var=$name}}<br /><br />Please look at <a href="{{var product_url}}">{{var product_name}}</a><br /><br />Here is message: <br />{{var message}}<br /><br /></p>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#E0E4E6" align="center" style="background:#E0E4E6; text-align:center;"><center><p style="font-size:12px; margin:0; ">Thank you, {{var sender_name}}</p></center></td>
                    </tr>
<tr><td  style="background:ffffff; height="50"; align="center";>
<a href="https://www.facebook.com/" target="_blank"><img src="{{skin url="images/facebook.png"  _area='frontend' _package="ljj" _theme="can"}}" height="30" width="34" /></a>
<a href="http://www.houzz.com/" target="_blank"><img src="{{skin url="images/houzz.png"  _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="38" /></a>
<a href="http://instagram.com/" target="_blank"><img src="{{skin url="images/instragram.png"  _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="38" /></a>
<a href="https://www.pinterest.com/" target="_blank"><img src="{{skin url="images/pinterest.png"  _area='frontend' _package="ljlkj" _theme="can"}}" height="30" width="34" /></a></td></tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</body>

body { color:#61777f; font:11px/1.35em Verdana, Arial, Helvetica, sans-serif; }

p a {color: #278eb2;}

table {
    border-collapse: collapse;
}

Answer 1

你有两段，把它们去掉。

替换

<td valign="top">
    <p style="border:2px solid #E0E0E0; font-size:12px; line-height:16px; background:#F9F9F9; padding: 16px 18px;"> Welcome, ...</p>
</td>

为

<td valign="top" style="border: 2px solid #e0e0e0; font-size: 12px; line-height: 16px; background: #f9f9f9; padding: 16px 18px"> Welcome, ...</td>

与第二段相同：

<td bgcolor="#E0E4E6" align="center" style="background:#E0E4E6; text-align:center; font-size:12px; margin:0;">Thank you, {{var sender_name}}</td>
<!-- <center> isn't necessary here, when you used text-align: center; -->

在这种情况下你不需要它们。

如何替换 HTML Table 中样式化的 <p> 标签以便在 Outlook 中使用

How to replace styled <p> tag in HTML Table for Use in Outlook

css

outlook

html-table

html-email