第十三彈-瀏覽器兼容

1.如何調(diào)試 IE 瀏覽器

  • IE7以上可以使用瀏覽器自帶的開(kāi)發(fā)者工具，IE6可以使用加邊框的直觀方式進(jìn)行調(diào)試；
  • 使用模擬器模擬不同版本的IE瀏覽器，如IEtester或者Test IE、Edge自帶模擬器等；
  • 安裝虛擬機(jī)，在虛擬機(jī)內(nèi)安裝多個(gè)系統(tǒng)搭配不同版本IE瀏覽器來(lái)進(jìn)行調(diào)試；

2.什么是CSS hack？在 CSS 和 HTML里如何寫(xiě) hack？在 CSS 中 ie6、ie7的 hack 方式？

CSS hack概念：

CSS hack由于不同廠(chǎng)商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠(chǎng)商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果，這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。 簡(jiǎn)單的說(shuō)，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果;

三種表現(xiàn)形式：

  • 屬性前綴法(即類(lèi)內(nèi)部Hack)：
    background:black; /* for all browsers /
    _background:red; /     for ie6 */
    background:green; / for ie6~7 /
    background:blue\9; /     for ie6~10 */

  • 選擇器前綴法(即選擇器Hack)：
    html .class{}/ for IE6 */
    +html .class{}/ for IE7 */
    :first-child+html .class{}/ for IE7 */

  • IE條件注釋法(即HTML條件注釋Hack)：

     只在IE下生效
 <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css">
 <![endif]-->
 只在IE6下生效
 <!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="ie6.css">
 <![endif]-->
 只在IE6以上版本生效
 <!--[if gte IE 6]>
 這段文字只在IE6以上(包括)版本IE瀏覽器顯示
 <![endif]-->
 非IE瀏覽器生效
 <!--[if !IE]>
 這段文字只在非IE瀏覽器顯示
 <![endif]-->
在 CSS 中 ie6、ie7的 hack 方式：

屬性以星號(hào)開(kāi)頭，如 *color: red;/* 該屬性只在ie6、ie7生效 */;

3.列舉幾種 瀏覽器兼容問(wèn)題

  • border-radius:4px；/* ie7以下版本不支持圓角 */
    解決辦法：使用JQuery框架集來(lái)設(shè)置圓角或者圓角圖片進(jìn)行覆蓋;
  • min-height:200px;/*IE8以下不支持*/
    解決辦法：添加"*height：200px；"屬性設(shè)置；
  • display：inline-block;/*IE8以下不支持*/
    解決辦法：添加"*display：inline；"屬性設(shè)置；
  • opacity：0.6;/*IE8部分支持，IE8以下不支持*/
    解決辦法：添加"filter:alpha(opacity=50); / IE */"屬性設(shè)置；

4.針對(duì)兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)是什么意思？

看法：
  • 分析需求，對(duì)于上級(jí)或客戶(hù)需求兼容的低版本瀏覽器需全部兼容；
  • 對(duì)于低版本只要大局顯示不影響，可以不刻意追求美觀上樣式的一致；
  • 分析瀏覽器占用率，一般低于一定占用率的瀏覽器可以選擇不兼容；
  • 總體上，把握時(shí)間成本、用戶(hù)群體、交互效果上進(jìn)行權(quán)衡是否需要兼容對(duì)應(yīng)的瀏覽器；
漸進(jìn)增強(qiáng)（progressive enhancement）：
  • 一開(kāi)始只構(gòu)建站點(diǎn)的最少特性，然后不斷針對(duì)各瀏覽器追加功能;
  • 從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能。漸進(jìn)增強(qiáng)是值得所有開(kāi)發(fā)者采用的做法。漸進(jìn)增強(qiáng)方案并不假定所有用戶(hù)都支持javascript，而總是提供一種候補(bǔ)方法，確保用戶(hù)可以訪(fǎng)問(wèn)（主要的）內(nèi)容;
  • 使用漸進(jìn)增強(qiáng)時(shí)，無(wú)需為了一個(gè)已成型的網(wǎng)站在舊式瀏覽器下正常工作而做逆向工程。首先，只需要為所有的設(shè)備和瀏覽器準(zhǔn)備好清晰且語(yǔ)義化的HTML以及完善的內(nèi)容，然后再以無(wú)侵入（unobtrusive）的方式向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器升級(jí)時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用;
優(yōu)雅降級(jí)（graceful degradation）：
  • 一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù);
  • 使用優(yōu)雅降級(jí)方案，Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶(hù)使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問(wèn)題，絕大多數(shù)Web設(shè)計(jì)師和開(kāi)發(fā)者都通過(guò)專(zhuān)門(mén)的樣式表或針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了；
  • 使用優(yōu)雅降級(jí)技術(shù)時(shí)，你必須首先完整的實(shí)現(xiàn)了網(wǎng)站，其中包括所有的功能和效果。然后再為那些無(wú)法支持所有功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效;

參考文檔：百度搜索

5.reset.css和normalize.css分別是做什么的？為什么推薦使用nomalize.css?

**Reset.css: **
統(tǒng)一各個(gè)版本瀏覽器默認(rèn)Html標(biāo)簽樣式，直接重置所有原瀏覽器默認(rèn)樣式，再添加統(tǒng)一的標(biāo)準(zhǔn)默認(rèn)樣式；
normalize.css：
統(tǒng)一各個(gè)版本瀏覽器默認(rèn)Html標(biāo)簽樣式，只重置統(tǒng)一瀏覽器默認(rèn)樣式中有差異的部分樣式；

推薦使用Normalize的好處：
  • Normalize.css 保護(hù)了有價(jià)值的默認(rèn)值；
  • Normalize.css 修復(fù)了瀏覽器的bug
  • Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂；
  • Normalize.css 是模塊化的；
  • Normalize.css 擁有詳細(xì)的文檔。

參考文檔：Jerry Zou

6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用

W3C盒模型（標(biāo)準(zhǔn)盒模型）：
chrome， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型， 寬度= 內(nèi)容寬度，如下圖：

IE 盒模型：
ie678怪異模式（不添加 doctype）使用 ie 盒模型，寬度=邊框+padding+內(nèi)容寬度，如下圖：

使 IE6、7、8使用標(biāo)準(zhǔn)盒模型：
  • 添加聲明<!DOCTYPE html>
box-sizing:border-box作用:
  • 為元素設(shè)定的寬度和高度決定了元素的邊框盒。即使盒子模型設(shè)定為IE盒模型，設(shè)定寬高包含內(nèi)邊距和邊框和內(nèi)容寬度；

7.操作

1. virtualbox 安裝 xp 虛擬機(jī):

mac
windows

答：

  • 安裝了XP及win7的virtualbox，如下圖：


2. 在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的區(qū)別？
答：
  • 盒模型，IE6、7、8聲明 <!Doctype html>，運(yùn)行效果如下圖：
  • 盒模型，IE6、7、8未聲明 <!Doctype html>，運(yùn)行效果如下圖：

  • inline-block在IE8中兼容，IE6、7不兼容，運(yùn)行效果如下圖：


  • max-width在IE8中兼容，IE6、7不兼容，運(yùn)行效果如下圖：


　　　　　　　　聲明：本博客教程版權(quán)歸蘭文聰和饑人谷所有，轉(zhuǎn)載需說(shuō)明來(lái)源！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,093評(píng)論 1贊 92
  • 一、如何調(diào)試 IE 瀏覽器？ 在IE7以上的版本中可以通過(guò)按快捷鍵F12調(diào)出開(kāi)發(fā)人員調(diào)試框，如下圖IE7以上調(diào)試工...
    dengpan閱讀 650評(píng)論 0贊 2
  • 一、問(wèn)答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺(tái)，可以按F12啟動(dòng)。Paste_Image.p...
    _hello__world_閱讀 565評(píng)論 0贊 1
  • 一、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開(kāi)發(fā)者工具，IE6可以用border的方法；例：IE11的開(kāi)發(fā)者工...
    __Qiao閱讀 1,177評(píng)論 2贊 17
  • 第二章 七個(gè)習(xí)慣概論 本書(shū)將習(xí)慣定義為“知識(shí)”、“技巧”和“意愿”相互交織的結(jié)果。 “成熟模式圖”，即人類(lèi)成長(zhǎng)的三...
    聽(tīng)說(shuō)Hey這個(gè)昵稱(chēng)被使用了閱讀 373評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容