span 上的border-bottom 属性会影响outlook365 中各个元素的所有边框

Question

我的公司正在使用 Adob​​e dreamweaver 生成 HTML 电子邮件，但它经常无法正常工作或提供所需的功能。所以我必须介入并让 HTML 电子邮件至少在我们的 Office365 环境中工作......

但是，重点是：在某些文本上方，应显示绿线/边框。所以我进入了源代码，查找了包含元素，并在应该有一个绿色上边框的单词周围添加了一个 span 标签。然后我加了

style="border-top: 5px solid green"

当我将 HTML 代码插入电子邮件时，我会看到一个单词完全被绿色边框包围，而不仅仅是绿色的顶部边框。

span 标签位于 b 标签中，b 标签位于 td 中，以此类推。在我看来没什么特别的。

我已经尝试通过使用跨越的其他元素来解决这个问题，但它没有奏效。通常看起来好像 Outlook 甚至无法识别这些标签。

display: inline

对 div 元素也没有任何影响，我对此寄予厚望，因为至少在那里，border-top 仅激活了顶部边框，而不是它周围的所有边框。但不幸的是，它不是内联的...^^

有没有经验丰富的 HTML-Email 设计师可以提供一两个建议？

编辑： 部分标记

                        <td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
                            <table width="547" bgcolor="#ffffff">
                            <tr>
                            <td width="539" height="40" bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;"> <b><span style="border-top: 5px solid green;">TEST</span> - blablabla</b>
                              </tr>
                            </table>
                        </td>

Answer 1

我不会使用 Span 标签来执行此操作。您需要一个块元素来添加边框（例如 div / td）。 我建议使用表格和表格单元格。无论电子邮件客户端有什么怪癖，这都是您添加边框的最佳方式，这种方式在所有地方都受支持，并保持一切看起来不错。

在下面查看我的编辑：

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
    	<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
            <table width="547" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                	<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
                                        <tr>
                                            <td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid green; padding-top:3px;">
                                                <b>TEST</b>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                	<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
                                        <tr>
                                            <td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid #ffffff; padding-top:3px;">
                                                <b>- blablabla</b>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>