如何刪除我的 HTML email 中的鏈接下划線？

Question

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

我使用此代碼在我的 HTML email 中建立鏈接。在瀏覽器和 Outlook 中它運行良好，但在 GMail、Hotmail 和 ymail 中它顯示帶下划線的鏈接。

誰能幫我擺脫這個？

Answer 1

<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

Outlook 將刪除帶有!important標簽的樣式，保留常規樣式，因此沒有下划線。 !important標簽將覆蓋基於 Web 的電子郵件客戶端的默認樣式，因此不會留下下划線。

Answer 2

我看到這已經得到了回答； 但是，我覺得此鏈接提供了有關各種電子郵件客戶端支持的格式的適當信息。

http://www.campaignmonitor.com/css/

值得注意的是，GMail 和 Outlook 是兩種最挑剔的 HTML 電子郵件格式。

Answer 3

在文本修飾規則中使用!important 。

<a href="#" style="text-decoration:none !important;">BOOK NOW</a>

Answer 4

經過半天的研究（以及這個問題提出兩年后），我相信我已經找到了一個全面的答案。

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

（您需要鏈接內跨度上的 text-underline 屬性和字體標簽來編輯顏色）

Answer 5

另一種欺騙 Gmail 的方法（對於電話號碼）：使用 ~ 而不是 -

404-835-9421 --> 404~835~9421

它將為您（或不太精明的用戶；-）節省 html 通道。

我找到了另一種方法來刪除迄今為止我測試過的 Outlook 中的鏈接。 例如，如果您在 css 中創建一個空白類，請說 .blank {} 然后對您的鏈接執行以下操作，例如：

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

這對我有用，希望它能幫助那些仍然無法刪除 Outlook 中鏈接下划線的人。 如果有人有 gmail 的解決方法，請您幫我嘗試此線程中的所有內容，但沒有任何效果。

謝謝

Answer 6

我認為，如果您在<a>標簽后放置一個帶有text-decoration:none的 span 樣式，它將適用於大多數瀏覽器/電子郵件客戶端。

如：

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>

Answer 7

我在 Outlook 和 Gmail 應用程序中的 a href 上添加了兩個聲明。 Outlook 忽略了 !important 並且 gmail 需要它。 電子郵件的 Web 版本適用於兩者。

text-decoration: none !important; text-decoration: none;

Answer 8

Windows Mail 似乎完全忽略了內聯text-decoration標簽，但對我來說修復它的是通過將其添加到頭部：

<!--[if (mso)|(mso 16)]>
<style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
</style>
<![endif]-->

Answer 9

所有電子郵件客戶端都會根據自己的規則調整您提供的 HTML 和 CSS 代碼：

例如：gmail 會刪除除正文標簽的內部 HTML 之外的所有內容。

1.對於大多數其他客戶，您可以在標題中添加樣式標簽

<style type="text/css">
    a {text-decoration: none !important;}
</style>

注意：不要使用 CSS 注釋，因為 YAHOO!Mail 可能會引起麻煩。

2. 在保存方面，將相同的代碼內聯添加到 A 標簽中，以及一個額外的 span 標簽（標簽中的樣式規則經常被刪除）

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>

Answer 10

要在郵件應用程序和 Web 瀏覽器中完全“隱藏” <a>下划線，可以執行以下棘手的方法。

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

1. 第一個<span>中的顏色是您不需要的顏色，必須設置為與您的背景顏色相同。 （此處為紅色）

2. 第二個<span>中的顏色是按鈕文本的顏色。 （此處為白色）

Answer 11

文本修飾 none 對我不起作用，然后我在 Outlook 中找到了一封沒有該行的電子郵件並檢查了代碼：

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

這個對我有用。

Answer 12

我使用了在 google 中不顯示鏈接、為 mso (outlook) 添加鏈接和害羞標簽的組合，以保持我公司的外觀和感覺。 一些代碼可能是多余的（對於我的公司來說，外觀比可點擊部分更重要。（感覺就像一個拼圖，因為每一個變化都會阻礙其他東西）

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

希望這有助於某人

Answer 13

這完全取決於電子郵件客戶端是否要在鏈接下顯示下划線。 截至目前，正文中的樣式僅支持：

• 展望 2007/10/13 +
• 展望 2000/03
• 蘋果 iPhone/iPad
• 展望網
• 蘋果郵件 4
• 雅虎！ 郵件測試版

http://www.campaignmonitor.com/css/

Answer 14

使用text-decoration:none !important; 而不是text-decoration:none; 以確保您“丟失”下划線。

Answer 15

在http://www.campaignmonitor.com/css/ 中，一個很好的解釋說明這是受限制的！ 還有一個非常好的指南，可以了解電子郵件客戶端中 CSS 的所有限制。

Answer 16

您可以執行“冗余樣式”，這應該可以解決問題。 您使用與 相同的樣式，但將其添加到 .

例子：

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>

Answer 17

在查看 html 電子郵件時，嘗試檢查該鏈接上的元素，看看是什么覆蓋了它。 使用該類並在您的頭部樣式中再次定義該樣式並定義 text-decoration: none !important;

就我而言，這些是覆蓋我的內聯樣式的類，因此在我的 html 電子郵件的頭部聲明了這一點，並定義了我想要實現的樣式。

它對我有用，希望它也適用於你的。

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}   

Answer 18

下面幾行的代碼在 Gmail Web 客戶端中對我有用。 電子郵件中出現了一個無下划線的黑色鏈接。 我沒有使用嵌套的span標簽。

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

注意：Gmail 會去除任何不正確的內嵌樣式。 例如，像下面這樣的代碼將全部剝離其內聯樣式。

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>

Answer 19

我復制了我的 html 頁面並粘貼到 word 中。 編輯 word 中的簽名，刪除放置下划線的空格，並按空格鍵制作我自己的“填充”。 再次復制並粘貼到 Outlook 2013。對我來說效果很好。

Answer 20

在 Windows 10 郵件中，您可能需要在 html 頭中添加這些：

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

'a {text-decoration: none;}' 修復了下划線問題:)

Answer 21

在我的例子中，我使用 Safari 配置了簽名（復制並粘貼到 gmail 中）。我嘗試了你放在這里的每一個代碼，但這些都沒有用。 使用 Safari 粘貼簽名后，您可以返回 Chrome，下划線消失了。

Answer 22

您所要做的就是：

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

Answer 23

在 div / span of text 之前放置沒有任何樣式的“a href”標簽。 然后在 div/span 標簽中制作你的樣式。

適用於最受限制的樣式電子郵件客戶端。

<div><a href=""><span style="text-decoration:none">title</span><a/></div>

Answer 24

你應該寫這樣的東西。

<a href="#" style="text-decoration:none;">BOOK NOW</a>