与时事通讯文本颜色不同的下划线。（与外观兼容）

Question

我想给与文本颜色不同的文本添加下划线。我知道我可以在 a 中设置边框，但这在 Outlook 中不起作用。

我所做的是创建一个 1 px 表（实际上是一个 0 px 表，但 1 是我猜的最小高度）嵌套在另一个包含我的文本的表中，并使其宽度为 100%，以便它得到下划线。这种解决方案的问题在于，新闻通讯的接受范围很广。

有人遇到过这个问题吗？任何解决方法？

如果可以在 Outlook 上使用边界锚标记或跨度，则可以接受，但 Outlook 仍然大量用于阅读电子邮件。

检查我的代码：

<table align="center" width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;">
                <tr>
                    <td style="border:1px solid #000000;padding-left:10px;padding-right:10px;padding-top:5px;">
                        <a href="http://www.google.com" style="color:#000001;text-decoration:none;line-height:14px;display:block;"><span style="font-size:13px;line-height:13px;text-decoration:none;font-weight:bold;"><b>Check this out!</b></span><span style="font-size:14px;line-height:14px;color:#000000;font-weight:bold;">&nbsp;›</span></a>
                        <table width="100%" height="0" style="font-size:0px;line-height:0px">
                        <tr>
                        <td width="100%" bgcolor="#30fd3e" height="0" style="font-size:0px;line-height:0px">&nbsp;</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="15" align="center" style="font-size:0px;line-height:0px;">        
                    &nbsp;&nbsp;</td>
                </tr>
             </table>   
        </td>
    </tr>
</table>

和 JSfiddle：

http://jsfiddle.net/tZ2X6/1/

感谢你们的时间，

比尔。

Answer 1

要画一条线，table 内的 table 对我来说是个坏主意.....不确定 Outlook 兼容性，但 span 是一个更简单的解决方案：

demo

span.line{
  display:block; /* important because need to have full width of "td" */
  padding-bottom:2px; /* height between text and underline */
  border-bottom:1px solid green; /* mention color of your choice here*/
  width:100%;
}

Answer 2

一段时间后，我设法为 Outlook 找到了兼容的解决方案。

我没有将 bgcolor 添加到表格中，而是添加了一个边框底部，并且它尽可能薄。

代码

<table align="center" height="30" width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="bottom">
            <table align="center" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-weight:bold;border:1px solid #000000;">
                <tr>
                    <td style="padding-left:10px;padding-right:10px;padding-top:5px;">
                        <a href="http://www.google.com" style="color:#000001;text-decoration:none;line-height:14px;display:block;"><span style="font-size:13px;line-height:13px;text-decoration:none;font-weight:bold;"><b>Check this out!</b></span><span style="font-size:14px;line-height:14px;color:#000000;font-weight:bold;">&nbsp;›</span></a>
                        <table width="100%" height="0"  border="0" cellpadding="0" cellspacing="0" style="font-size:0px;line-height:0px;border-bottom:1px solid green;">
                        <tr>
                        <td width="100%" style="font-size:0pt;line-height:0pt;">&nbsp;</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td height="5" align="center" style="font-size:0pt;line-height:0pt;">        
                    &nbsp;&nbsp;</td>
                </tr>
              </table>
         </td>
    </tr>
</table>

还有 Jsfiddle：

working fiddle

请注意border=0 cellpadding=0 and cellspacing=0 非常重要，因此边框靠近文本并提供下划线效果。