從outlook發送到gmail時如何防止html鏈接下划線？

Question

我嘗試將包含錨標記的渲染html復制粘貼到outlook，例如：

<a href="tel:1000000000" style="text-decoration: none; color: #4e4b4c;">1000000000</a>

（我選擇右鍵單擊渲染的html - >全選）

但當我發送郵件到Gmail時，我會收到帶下划線的鏈接。 我試圖給這個元素text-decoration: none; 風格，但它不起作用。

這是一個代碼示例： https ： //codepen.io/anon/pen/WdKrvj

在outlook（發送方）： 復制粘貼后的前景

在gmail（接收方）： 收到后的Gmail

謝謝！

Answer 1

放置鏈接是因為Gmail會在鏈接示例周圍放置一個列表樣式：

.ii a[href] { color: #15c; }

解決此問題的方法是在您的電話號碼（或地址）周圍添加一個范圍

<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>

然后使用CSS，您可以定位該特定元素並設置它的樣式

.contact a {color:#000000!important; text-decoration:underline!important;}

完整的文章（有第二個選項）可以在這里找到。

希望這能回答你的問題。

Answer 2

有時我發現內聯text-decoration: none; 還不夠。 討厭，對吧？ 我已經添加了以下代碼來防止像這樣的自動檢測鏈接。 基本上將類添加到任何父元素（如<td>或<div> ），其中可能包含電子郵件客戶端可能檢測到的電話號碼或郵寄地址。

CSS：

<style>
    *[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
</style>

HTML：

<td class="x-gmail-data-detectors">
    <a href="tel:1000000000" style="text-decoration: none; color: #4e4b4c;">1000000000</a>
</td>

我已經看到這通常有用，但根據您正在測試的Gmail的風格，結果可能會有所不同。