Question

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

我所做的是创建一个1 px表（实际上是一个零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对我来说是一个坏主意.....不确定外观兼容性，但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至关重要，因此边框与文字保持接近，并且会产生下划线效果。

用于简报的不同颜色的下划线。（展望兼容）

2 个答案: