Outlook中RTL模式下左侧垂直细线消除方案咨询

问题表现为：Outlook邮件中，设置了dir="rtl"（从右到左）布局的文本区域左侧会出现一条多余的细垂直线，该问题仅在RTL模式下触发。这是Outlook旧版Word渲染引擎对RTL表格的兼容性bug导致的，以下是几个可行的解决方法：

方法1：强制表格边框为无并合并边框 #

给设置了dir="rtl"的表格添加border-collapse: collapse和border: none样式，覆盖Outlook默认的隐性边框：

<table dir="rtl" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 15px; text-align: center; color: #FFFFFF; border-collapse: collapse; border: none !important;" width="80%">
    <tr>
        <td valign="middle">
            <strong style="font-size: 30px; line-height: 35px;">
                Title
            </strong>
        </td>
    </tr>
</table>

方法2：将RTL属性移至文本容器而非表格 #

避免直接给表格设置dir="rtl"，把该属性应用到内部的文本元素（如<div>）上，绕开表格的渲染bug：

<table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 15px; text-align: center; color: #FFFFFF;" width="80%">
    <tr>
        <td valign="middle">
            <div dir="rtl">
                <strong style="font-size: 30px; line-height: 35px;">
                    Title
                </strong>
            </div>
        </td>
    </tr>
</table>

方法3：清除表格的轮廓样式 #

部分情况下，这条细线是Outlook自动添加的轮廓，给表格添加outline: none !important样式即可消除：

<table dir="rtl" align="center" border="0" cellpadding="0" cellspacing="0" style="font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 15px; text-align: center; color: #FFFFFF; outline: none !important;" width="80%">
    <tr>
        <td valign="middle">
            <strong style="font-size: 30px; line-height: 35px;">
                Title
            </strong>
        </td>
    </tr>
</table>

推荐优先尝试方法2，因为它从根源上避免了表格RTL渲染的兼容性问题，适配性最好。

内容的提问来源于stack exchange，提问作者AviC