《網(wǎng)頁設(shè)計與制作》課件-第八章 CSS兼容性詳談

第八章CSS兼容性詳談本章知識點瀏覽器兼容性問題產(chǎn)生的根源瀏覽器兼容性測試CSSHack法IE條件注釋法HTML默認(rèn)樣式引起的兼容性問題浮動引起的兼容性問題外邊距疊加的問題居中的問題IE6中“捉迷藏”的問題如何避免CSS兼容性問題一、瀏覽器兼容性問題概述所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況用戶使用的瀏覽器不會相同網(wǎng)站的網(wǎng)頁顯示效果應(yīng)該統(tǒng)一前端開發(fā)人員必須具備解決兼容性問題的能力一、瀏覽器兼容性問題概述CSS在瀏覽器中的兼容性問題二、瀏覽器兼容性問題產(chǎn)生的根源不同的瀏覽器其內(nèi)核不同，而對HTML、CSS、JS等代碼的解析完全依賴于瀏覽器內(nèi)核，導(dǎo)致用戶最終看到的效果有差別瀏覽器內(nèi)核：即瀏覽器所采用的渲染引擎，負(fù)責(zé)對網(wǎng)頁語法的解釋（如HTML、JavaScript）并渲染（顯示）網(wǎng)頁。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同。需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果。二、瀏覽器兼容性問題產(chǎn)生的根源流行的瀏覽器內(nèi)核有四種Trident內(nèi)核：IE、具備“雙核模式”瀏覽器的“兼容模式”WebKit內(nèi)核：Safari、Chrome、具備“雙核模式”的瀏覽器的“高速模式”Gecko：FirefoxPresto：Opera不同的瀏覽器內(nèi)核所支持的特性不完全一致；不同版本的相同瀏覽器內(nèi)核所支持的特性也有差別三、瀏覽器兼容性測試解決兼容性問題的第一步是發(fā)現(xiàn)問題，需要使用不同的瀏覽器對同一網(wǎng)頁進(jìn)行測試，并記錄測試結(jié)果三、瀏覽器兼容性測試根據(jù)占有市場份額來確定需要通過測試的瀏覽器全世界瀏覽器市場份額2016年2月2017年4月三、瀏覽器兼容性測試根據(jù)占有市場份額來確定需要通過測試的瀏覽器中國國內(nèi)瀏覽器排行榜2016年2月2017年4月三、瀏覽器兼容性測試不同的瀏覽器內(nèi)核對應(yīng)要使用的兼容性測試瀏覽器Trident內(nèi)核：IEtest、SuperPreview、搜狗、360安全瀏覽器WebKit內(nèi)核：Safari、Chrome、搜狗、360安全瀏覽器、遨游3Gecko內(nèi)核：FirefoxPresto內(nèi)核：Opera三、瀏覽器兼容性測試在同一計算機操作系統(tǒng)內(nèi)測試多個瀏覽器版本使用虛擬機，安裝多個操作系統(tǒng)，不同的系統(tǒng)使用不同版本的瀏覽器使用多版本集成測試工具，主要針對IE三、瀏覽器兼容性測試測試內(nèi)容“網(wǎng)頁平面效果圖”或“標(biāo)準(zhǔn)界面效果圖”在不同瀏覽器中的顯示效果三、瀏覽器兼容性測試測試流程確定參考：“標(biāo)準(zhǔn)界面效果圖”或網(wǎng)頁在Firefox中顯示效果測試順序：Gecko內(nèi)核：FirefoxWebKit內(nèi)核：Chrome、Safari、搜狗（高速模式）Trident內(nèi)核：IE10>IE9>IE8>IE7>IE6Presto內(nèi)核：Opera（可不測試）360瀏覽器、遨游測試報告見書上測試報告參考模版四、CSS兼容性問題解決方案兩類解決方案CSSHack法IE條件注釋法四、CSS兼容性問題解決方案CSSHack法針對不同的瀏覽器寫不同的CSS的過程，就叫CSSHack。工作原理：不同的瀏覽器對CSS的支持及解析結(jié)果不同不同的瀏覽器內(nèi)核，可以認(rèn)識一些專門的符號標(biāo)識的CSSCSS中的選擇器存在優(yōu)先級后書寫的聲明，會覆蓋前面的同類聲明四、CSS兼容性問題解決方案CSSHack的三種表現(xiàn)形式選擇器內(nèi)部Hack選擇器名稱Hack瀏覽器私有擴展Hack四、CSS兼容性問題解決方案寫CSSHack的一般技巧越多瀏覽器支持的寫法，越應(yīng)該放在前面處理IE瀏覽器的兼容性問題，一般使用選擇器內(nèi)部Hack因使用Firefox進(jìn)行開發(fā)，一般兼容性問題使用“選擇器內(nèi)部Hack”基本可以解決四、CSS兼容性問題解決方案IE條件注釋法指的是一種只在Windows下的IE上被識別的注釋，從IE5開始支持。工作原理：在某個IE版本的瀏覽器下，找出導(dǎo)致兼容性問題的聲明在代碼中，使用只有該版本認(rèn)識的“IE條件注釋”，將有兼容性問題的聲明重寫四、CSS兼容性問題解決方案CSS兼容性問題解決總結(jié)應(yīng)按照正確的測試順序，一般為：“FF>GH||SF>IE10>IE9>IE8>IE7>IE6”基本原則最小影響快速維護(hù)最小成本代碼可讀五、常見CSS的瀏覽器兼容性問題HTML默認(rèn)樣式引起的兼容性問題浮動引起的兼容性問題外邊距疊加的問題居中的問題IE6中“捉迷藏”問題五、常見CSS的瀏覽器兼容性問題HTML默認(rèn)樣式引起的兼容性問題產(chǎn)生的原因：不同的瀏覽器在解析某HTML元素時，某些樣式屬性的默認(rèn)值不同解決方案：使用CSS重寫產(chǎn)生兼容性問題的屬性，將這些屬性值設(shè)置成一樣。這種做法叫做“HTML默認(rèn)樣式重置”，英文名稱“CSSReset”已有多種成熟的CSSReset方案，如：YUICSSResetEricMeyerCSSReset在進(jìn)行網(wǎng)頁編碼時，第一個步驟就應(yīng)該使用<link>標(biāo)簽鏈接外部樣式表“reset.css”五、常見CSS的瀏覽器兼容性問題浮動引起的兼容性問題父盒子包含浮動子盒子，父盒子將檢測不到浮動子盒子的高度左盒子浮動，右盒子躲背后的問題之前存在浮動，沒有清除，導(dǎo)致后面的盒子錯位IE6下浮動盒子雙倍邊距問題IE6下雙倍高度問題五、常見CSS的瀏覽器兼容性問題外邊距疊加的問題在IE9、Firefox、Chrome等瀏覽器中，當(dāng)父子盒子嵌套時，如果兩個盒子之間沒有其他內(nèi)容，那么設(shè)置子盒子的“margin-top”屬性，父子盒子上邊框之間并不會出現(xiàn)間隙居中的問題塊級元素水平居中文字垂直居中IE6中“捉迷藏”問題當(dāng)div應(yīng)用稍顯復(fù)雜時會出現(xiàn)，某些內(nèi)容會被隱藏六、如何避免CSS兼容性問題解決CSS兼容性問題的最好方法就是熟悉常見的CSS兼容性問題，并在開發(fā)的過程中就去避免這些問題開發(fā)的過程中應(yīng)該以Firefox作為測試瀏覽器網(wǎng)頁應(yīng)嚴(yán)格遵循XHTML文檔的語法要求不使用瀏覽器特定支持的HTML標(biāo)簽六、如何避免CSS兼容性問題一般將CSSReset、浮動修復(fù)、間隙放在一個文件里，使用<link>標(biāo)簽鏈接到網(wǎng)頁中使用浮動（float）后，要及時清除浮動凡是固定寬度或高度的元素，都要設(shè)置“overflow:hidden;”元素的居中不僅要設(shè)置父元素的“text-align:center;”還要設(shè)置元素本身“margin:0pxauto;”IE6中，要恰當(dāng)?shù)氖褂谩皕oom:1;”，激發(fā)內(nèi)聯(lián)元素的塊級特性本章小結(jié)所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況瀏覽器兼容性問題的根源在于瀏覽器的內(nèi)核不同，現(xiàn)在流行的瀏覽器內(nèi)核有四種：Trident內(nèi)核、WebKit內(nèi)核、Gecko內(nèi)核和Presto內(nèi)核通過測試發(fā)現(xiàn)問題，進(jìn)行記錄，并有針對性的解決問題CSS兼容性問題解決方案有兩大類：CSSHack法、IE條件注釋法CSSHack大致有三種表現(xiàn)形式：選擇器內(nèi)部Hack、選擇器Hack、瀏覽器私有擴展Hack