下劃線的顏色不同於新聞稿的文本（與Outlook兼容）

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

經過一番我設法爲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是至關重要的，因此邊框貼近文本，它給人的下劃線效果。

Answer 2

對於畫線，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%; 
}