国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML 郵件兼容問題與解決方案

RdouTyping / 2189人閱讀

摘要：因為微軟一向地特立獨行，使得成為了最難啃的骨頭。這就意味著郵件中幾乎只有這幾個元素，盡量避免使用或是其他標簽。

HTML 郵件內容雖然也是 HTML，但是和我們在網頁上使用的 HTML 不同，因為安全原因，各大郵箱服務商及郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本 HTML 展示。

在桌面和移動端渲染電子郵件大約有上百萬種不同的組合方式。

尤其是鼎鼎大名的 OutLook，從 OutLook2007 開始便使用 Word HTML 引擎進行渲染，為了它的安全性從而使得整個郵件倒退回了 2000 年前，為了郵件的兼容性你不得不使用很多廢棄的標簽、屬性，并且這一狀況將會維持無數個
年頭，因為雖然萬事終有盡頭，但 OutLook 始終存在。

“我們將繼續使用 Word 創建電子郵件信息，因為我們認為它是制作電子郵件最好的。”——Outlook 團隊如是說。

因為微軟一向地特立獨行，使得 OutLook 成為了最難啃的骨頭。因為 OutLook 支持的標簽和屬性少得可憐，所以只要兼容了 OutLook，其他郵箱客戶端基本都不會有什么問題。如果你開始開發 HTML 郵件并打算為其在各個郵箱里的兼容性努力，下面的建議將非常有用。

基本規則 布局使用 table

這幾乎是 HTML 郵件與普通 HTML 頁面最大的區別，因為各個郵箱對 div + css 這一套布局的解析問題很大（如 float / position 等 CSS 都會被過濾，甚至 margin: 0 auto; 都不起作用），基本各大郵箱都會解析混亂，所以老式的 table 布局是上乘之選。這就意味著 HTML 郵件中幾乎只有這幾個元素——table / tr / td / span / img / a，盡量避免使用 div / p 或是其他標簽。

而且并不是所有郵箱都支持 colspan / rowspan 屬性，所以所有布局都需要使用 table 嵌套解決。

使用表格布局導致的最直接的問題就是會產生多余的空白像素，所以要養成習慣給每個 table 都加上邊框 border，單元格內邊距 cellpadding，單元格間距 cellspacing，邊框合并屬性 border-collapse 這些屬性：
body 外的內容幾乎沒用

我們知道完整的 HTML 包括 DOCTYPE 聲明、html 和 head 標簽及其內容、body 標簽，對于在一個 iframe 中顯示郵件內容的郵箱還好，會保留上述結構，但是有些郵件（如 Gmail）都是在 div 中直接包含，這就對安全要求極為苛刻。安全原因郵箱會默認把上述結構做刪除處理，所以寫了幾乎沒有作用，在可能的情況下盡量把內容寫到 body 內，甚至建議從 table 開寫，直接放棄 DOCTYPE / html / head / body 標簽。

使用內聯樣式

與普通 HTML 頁面開發一樣，HTML 郵件依舊離不開 CSS，HTML 郵件并不支持外部的 style 文件，上面講到 head 標簽極有可能被刪除，所以不要試圖在 head 標簽內寫 style 標簽。

那么在 body 內寫 style 標簽是不是就保險了呢？并不是！典型的就是 Gmail 郵箱，會把 HTML 郵件內所有 style 標簽刪除，這就意味著只有內聯 style 屬性內的 CSS 是唯一可靠的樣式信息。

能用屬性就不要用樣式

并不是使用 style 屬性就保險了，很多郵箱會對特定標簽的屬性做強制改造。

比如在 OutLook 中，圖片使用以下方式來設置寬高是無效的：



正確的設置方法：


 


所以在有屬性能夠實現樣式效果的時候盡量使用屬性，常見的可用屬性有：


width
height
bgcolor
align
valign
……

所有樣式多帶帶指定

在寫頁面的時候利用 CSS 的繼承會為我們帶來很多便利，但是到了 HTML 郵件，一切都要 say NO!


其實繼承規則依舊有效，但是大部分郵件都無法完整繼承樣式，并且郵箱的默認樣式也會對郵件產生一些頭疼的干擾。比如 font-family，OutLook 中若想改變字體，至少每個 table 中都要指定 font-family，而在 QQ 郵箱甚至必須每個 td 都設置 font-family 才能全部生效。


因此每個標簽多帶帶指定樣式是必須的，盡可能不要依賴繼承，即使它十分地繁瑣。

腳本？想都不要想！

如題 (￣▽￣)"

圖片相關
背景圖片

style 內容里面 background 可以設置 color，但是 image 會被過濾，就是說不能通過 CSS 來設置背景圖片了。但是有一個很有意思的元素屬性，也叫 background，里面可以定義一個圖片路徑，但是功能有限，比如無法定位背景圖片等。


例如要給一個單元格加一個背景，必須這樣寫：



    



當然，不使用背景圖片是最好的選擇 ╮(╯-╰)╭

指定 width 和 height 屬性

因為在有些郵箱里，圖片不是默認加載的，往往加載前需要用戶的許可。那么高寬的指定可以使郵件在沒有圖片撐出樣子前也能保持良好的大小結構，加上 alt 屬性更可以明確告知圖片的內容讓用戶選擇是否下載它們。


如果因為項目需要（比如需要適配 Retina 高分屏），width 和 height 屬性更是必不可少的，并且由于一些 outlook 版本的奇葩表現，width 和 height 屬性一定不要加上單位！一定不要加上單位！一定不要加上單位！重要的事情說三遍。


否則你希望的是這樣的：


 




而實際上它確是這樣的：


 




因為加上單位會使一些版本的 OutLook 無法正確識別，導致圖片顯示使用實際的寬高而非我們設置的。


當然，常規項目中應盡可能保持設置的 width 和 height 的值與實際的寬高一致。


margin 與 padding


Outlook 2007-2013 不支持圖片的 margin 與 padding 樣式，必要的時候可以嘗試 hspace 和 vspace 屬性：


 


或者為圖片本身添加額外的空間（這個實在太LOW了，不推薦）

文字相關
字體

在 HTML 郵件中，font-family 只支持系統字體，不支持自定義字體，也不支持 font 簡寫，color 盡可能也不要使用簡寫：


font: 12px / 14px Arial, sans-serif; 
color: #999;


需要寫成：


line-height: 14px; 
font-size: 12px; 
font-family: "微軟雅黑", Arial, sans-serif; 
color: #999999;


對于加粗字體，我們可以使用 b 標簽而不是 CSS 的 font-weight，前文說過，HTML 標簽和屬性能解決的樣式決不使用 CSS 樣式。

行高

在 OutLook 中會有個默認的行高最小值，特別是當設置 font-family 為微軟雅黑時，默認的行高差不多為 Word 中的兩倍行距，如果 line-height 設置的值小于默認的行高，無論你設置的是多少，則始終使用默認值，在很多情況下這是不能忍的，好在有個神奇的 mso-line-height-rule，使用行高時添加 mso-line-height-rule:exactly; 就能使行高始終等于我們所設置的值。



    



這只是微軟的 CSS 屬性，對其他客戶端沒影響。并且該屬性只在塊元素上有效，所以想在 font 和 span 中用就洗洗睡了吧。


使用前：




使用后：




不過這種實現方式有點瑕疵，就是會導致大號字體無法垂直居中，大家自行取舍吧 (lll￢ω￢)

參考文獻

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007


What You Should Know About HTML Email


EDM制作要點


Outlook HTML 渲染引擎
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50620.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    HTML 郵件兼容問題與解決方案
    
                                                     
    摘要：因為微軟一向地特立獨行，使得成為了最難啃的骨頭。這就意味著郵件中幾乎只有這幾個元素，盡量避免使用或是其他標簽。

HTML 郵件內容雖然也是 HTML，但是和我們在網頁上使用的 HTML 不同，因為安全原因，各大郵箱服務商及郵件客戶端都會對郵件內容進行一定程度上的處理，不會按照你寫的原本 HTML 展示。
showImg(https://segmentfault.com/img/bVLl...
    
                                                   
                          
    
                                
    
                                    Cheriselalala
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）
    
                                                     
    摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標高度與的一致。

1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
    
                                                   
                          
    
                                
    
                                    teren
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）
    
                                                     
    摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標高度與的一致。

1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
    
                                                   
                          
    
                                
    
                                    wyk1184
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    手機端頁面在項目中遇到的一些問題及解決辦法（持續更新）
    
                                                     
    摘要：解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時，光標高度與的一致。

1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
    
                                                   
                          
    
                                
    
                                    Cristic
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<