Gmail,郵件關於支持ＨＴＭＬ樣式問題

時間 2019-11-24

標籤 gmail 郵件關於支持 html 樣式問題欄目 HTML 简体版

原文原文鏈接

(轉)Gmail,你必須瞭解的12個郵件編碼問題

轉載地址：http://www.maildesign.cn/archives/1537css

1.Gmail 不支持style=」 display：none」
2.Gmail不支持內嵌式CSS樣式
3.Gmail的連接默認樣式是藍色並帶下劃線
4.Gmail會將定義高度變成min-height
5.Gmail會忽略margin和padding負值屬性
6.Gmail不支持Backgrouds（大部分）
7.Gmail的DOCTYPE會影響line-height
8. Gmail會自動抓取郵件中的電話號碼
9. Gmail會自動爲未添加連接的URLS和email addresses 添加連接
10.Gmail郵箱提示Html大小不宜超過102k
11.Gmail不支持圖像路徑中包含空格
12.Gmail的DOCTYPE 在圖片下方會增長額外的空間html

1.Gmail 不支持style=」 display：none」
若是你想在Gmail中隱藏某些內容，很抱歉，你Gmail會忽略掉掉您定義的樣式。瀏覽器

style=「display:none」 wordpress

2.Gmail不支持內嵌式CSS樣式
內嵌式(Embedded)：可控制一個頁面中全部元素的樣式表Gmail內嵌的郵件，會將轉換成DIV標籤，所以像文字字體、字體大小、顏色等屬性若定義在頭部styleJ及body都將被忽略掉！另外，還須要提醒的是div內並不支持bgcolor。字體

<head> <style type=「text/css」> /*This is for all clients except Gmail, Gmail gets the same declarations from the body tag */ table, tr, td, p, span { font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px; } </style> </head> <body style=「margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px;」> Content </body> 編碼

3.Gmail的連接默認樣式是藍色並帶下劃線
Gmail默認連接顏色值是：＃1155CC 。你能夠在A標籤中定義其餘的顏色來替代Gmail默認連接顏色。可是，請必定要注意Gmail會忽略#000，#000000，和black值。
連接樣式定義成紅色：url

<a href=「http://www.maildesign.com.cn」 style=「color:#C00」>test</a> spa

若是連接定義成#000000，則會被渲染成默認#1155cc：code

<a href=「http://www.maildesign.com.cn」 style=「color:#000000」>test</a> htm

爲了解決這個問題，你能夠選擇接近黑色的十六進制顏色,如：#040400

<a href=「http://www.emailonacid.com」 style=「color:#040400」>test</a>

下劃線
Gmail郵箱中連接默認是有下劃線的，不過你能夠在標籤中自定義連接的下劃線樣式。
默認有下劃線

<a href=「http://www.maildesign.com.cn」>test</a>

自定義無下劃線

<a href=「http://www.maildesign.com.cn」 style="text-decoration:none">test</a>

4.Gmail會將定義高度變成min-height
Html中代碼：

<td style=「height: 20px;」></td>

發送至Gmail郵箱後樣式：

<td style=「min-height: 20px;」></td>

幾乎不少瀏覽器，關於Min-height屬性值高度與Height所顯示的高度並不同。不過能夠經過添加一個&nbsp；或者br 解決！

<td style=「min-height: 20px;」></td>

5.Gmail會忽略margin和padding負值屬性
好比：
margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px
儘管Gmail不支持負值屬性，咱們也不建議使用負值，像新版和經典版的Yahoo郵箱也不支持。

6.Gmail不支持Backgrouds（大部分）
好比：

background: #000; /*This will be accepted */

background: #000 url(http://www.test.com/test.jpg); /* This entire line will be ignored */

可是，可是，可是，你仍是想給某個區域添加背景顏色或圖片，怎麼辦呢？
寫法以下：

<td style=」 background: #000; background: #000 url(http://www.test.com/test.jpg);」>

還有一種寫法，就是在TD中使用「background」來定義背景圖片和顏色：

<td background=「http://www.test.com/test.jpg」 bgcolor=」#eeeeee」>

7.Gmail的DOCTYPE會影響line-height
Gmail郵箱中會發現郵件中文本的行高會比實際行高要高。
解決方法一：將內容放置在段落標籤中，代替用單個font或者span定義
解決方法二：在td定義行高和（或者）字體大小

8. Gmail會自動抓取郵件中的電話號碼
桌面端或移動端的Gmail，都會自動給電話號碼添加一個錨連接。在桌面Gmail版中，Google的連接能夠直接在右側打開語言或在線聊天平臺。

9. Gmail會自動爲未添加連接的URLS和email addresses 添加連接
也就是說你並不想給某個Url或email addres添加連接，但Gmail會自動幫你添加。
好比，某個段落中包含name@test.com，Gmail會轉化成連接：

212-389-3934

下面有2種修正方法：
1) 使用HTML 字符實體代替特殊符號，以下：
插入連字符 &#173

<a href=「mailto:name@test.com」> name@test.com</a>

www.maildesign.com.cn 能夠寫成

www.maildesign.com

http://www.maildesign.com.cn 能夠寫成

http://www.maildesign.com

2)添加標籤，但herf值等於#

<a href=’#’ style=「color:#000; text-decoration:none」> test@test.com</a>

10.Gmail郵箱提示Html大小不宜超過102k
當你的郵件大小超過102K，Gmail將會出現提示信息：
[Message clipped] View entire message
當用戶想繼續閱讀郵件，你的郵件將會在新的窗口打開。若是你的郵件大小接近102k，你能夠經過刪除郵件中沒必要要的空格，回車，說明等。
同時，咱們建議您發送Html文件時，嵌入附件如圖像，文件等。

11.Gmail不支持圖像路徑中包含空格
Gmail郵箱不支持圖像路徑中包含有空格，可使用下劃線或破折號。
請檢查你的圖像路徑是不是絕對路徑，若是仍然沒法解決的的話，可能因爲你的超文本傳輸協議是以https://開頭，能夠嘗試使用HTTP。

12.Gmail的DOCTYPE 在圖片下方會增長額外的空間
相似第7點，這個空白是因爲DOCTYPE所引發。下面有幾個方法能夠解決這些問題：
1.給圖片標籤添加樣式 display:block

<img src=「test.jpg」 style=「display:block」>

2.給圖片img添加align屬性值absbottom

<img src=「test.jpg」 align=「absbottom」>

3.給圖片添加樣式align屬性值texttop

<img src=「test.jpg」 align=」 texttop 」>

4.TD添加行高10px或更小

<td style=「line-height:10px」>

5.TD添加字體大小6px或更小

<td style=「font-size:6px」>