任務(wù)十三~瀏覽器兼容

一、如何調(diào)試 IE 瀏覽器？

  • 在IE7以上的版本中可以通過按快捷鍵F12調(diào)出開發(fā)人員調(diào)試框，如下圖


    IE7以上調(diào)試工具

  • 在沒有調(diào)試工具的版本上可以通過設(shè)置border、outline（IE6不支持）和**javascript: alert (document.get ...) **來進(jìn)行調(diào)試

  • 可以使用模擬器進(jìn)行調(diào)試，比如virtual pc、Expression Web SuperPreview、ietester

  • 通過安裝虛擬機(jī)的方法調(diào)試，如下圖


    虛擬機(jī)調(diào)試

二、什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？

  • CSS hack由于不同廠商的瀏覽器，比如IE,Safari,Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器抑或也可以反過來利用CSS hack為不同瀏覽器版本編寫不同的CSS效果（整理自百度百科）
  • CSS 和 HTML里hack寫法：
  • HTML里IE條件注釋
    • IE6下
    <!--[if IE 6]>
          <p>這里的內(nèi)容只會(huì)在IE6中顯示</p>
        <![endif]-->
    • IE6上
    <!--[if gte IE 6]>
          <p>這里的內(nèi)容會(huì)在IE6以上版本顯示</p>
        <![endif]-->
    • IE中
    <!--[if IE]>
          <p>這里的內(nèi)容會(huì)在IE中顯示</p>
        <![endif]-->
  • css屬性前綴法，通過在屬性前面添加特殊符號，使IE各版本能夠識別
.css_hack{    
   color:red; /* 所有瀏覽器 */  
   color:blue !important;/* 除了IE6外的所有瀏覽器 */  
   *color:black; /* IE6, IE7 */  
   +color:olive;/* IE6, IE7*/  
   color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
   color:pink\0; /* IE8, IE9, IE10 */  
   color:orange\9\0;/*IE9, IE10*/  
   _color:green; /* 只在IE6中 */  
}
  • 選擇器前綴法，針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack
*html #selector {} /* 只對IE6生效 */
 *+html #selector {} /* 只對IE7生效 */
 @media screen\9 { .selector { property: value; } } /* 只對IE6、7生效 */ 
@media \0screen {body { background: red; }} /* 只對IE8生效 */ 
@media \0screen\,screen\9{body { background: blue; }} /* 只對IE6，IE7，IE8有效 */ 
@media screen\0 {body { background: green; }} /* 只對IE8，IE9，IE10生效 */ 
@media screen and (min-width:0\0) {body { background: gray; }} /* 只對IE9，IE10生效 */
@media screen and (-ms-high-contrast: active), 
(-ms-high-contrast: none) {body { background: orange; }} /*只對IE10有效*/
  • 在 CSS中IE6的 hack 方式
  • IE條件注釋 
    <!--[if IE 6]>
     <div class="ie6">only ie6 can see</div>
 <![endif]-->

-css屬性前綴法
div{ _color:orange; }

  • 選擇器前綴法
*html div {
     color: orange;
}

如圖，在IE6中顯示的效果圖


IE6中的顯示效果

在非IE6的瀏覽器中顯示效果如下圖


chrome瀏覽器

可以看出在chrome中條件注釋的內(nèi)容并未顯示，更不用說為其設(shè)置的顏色?。?
  • 在 CSS中IE7的 hack 方式
  • IE條件注釋 
    <!--[if IE 7]>
     <div class="ie6">only ie6 can see</div>
 <![endif]-->

-css屬性前綴法
div{ *color:orange; }

  • 選擇器前綴法
*+html div {
     color: orange;
}

如圖，在IE7中顯示的效果圖

IE7中顯示效果圖

在非IE7的瀏覽器中顯示效果如下圖
chrome瀏覽器中顯示效果

更多知識···

三、列舉幾種瀏覽器兼容問題？

  • opacity，查詢其瀏覽器兼容性如下圖
    opacity兼容性

    由上圖可知opacity在IE中支持程度不是很好，在IE6、IE7、IE8中也只是部分兼容，首先看在IE7中的支持程度，在之前的代碼中補(bǔ)上如下代碼
.center{
                width: 300px;
                height: 300px;
                background: orange;
                opacity: 0.4;
            }

在IE7中顯示效果如下


opacity在IE7中顯示效果

而在現(xiàn)代瀏覽器中的顯示效果如下


opacity在chrome中顯示效果

要在IE7中兼容可以使用一下代碼 
filter:alpha(opacity=40);

此時(shí)在IE7中的顯示效果如下圖


opacity在IE7hack后效果圖
  • inline-block，查詢其瀏覽器兼容性如下圖
    inline-block兼容性

    由上圖可知inline-block在IE中支持程度不是很好，在IE6、IE7中也只是部分兼容，首先看在IE7中的支持程度，如下代碼
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>exercise</title>
        <style>
            div{
                display: inline-block;
            }
            .box1{
                width: 300px;
                height: 300px;
                background: orange;
            }
            .box2{
                width: 300px;
                height: 300px;
                background: pink;
            }
            .box3{
                width: 300px;
                height: 300px;
                background: olive;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

在IE7中顯示效果如下


inline-block在IE7中顯示效果圖

而在現(xiàn)代瀏覽器中的顯示效果如下


inline-block在chrome中顯示效果圖

要在IE7中兼容可以使用一下代碼 
*display: inline;
*zoom:1;

此時(shí)在IE7中的顯示效果如下圖


inline-block在IE7hack后顯示效果圖
  • IE6中浮動(dòng)元素添加margin時(shí)左外邊距的雙倍問題，如下代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1{
            background: orange;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
        }
        .box2{
            background: olive;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在IE6中顯示效果如下


雙外邊距問題

而在現(xiàn)代瀏覽器中的顯示效果


chrome無雙外邊距問題

要在IE6中兼容可以使用一下代碼，如下 
.box1{
            background: orange;
            width: 100px;
            height: 100px;
            float: left;
            margin: 25px;
            display: inline;
        }

此時(shí)在IE7中的顯示效果如下圖


解決浮動(dòng)左外邊距雙倍問題后效果圖

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

  • 對于兼容性、多瀏覽器覆蓋，調(diào)查統(tǒng)計(jì)自身產(chǎn)品用戶瀏覽器使用情況，當(dāng)某一瀏覽器使用用戶少于5%時(shí)，就可以忽略或者只保證產(chǎn)品基本功能可以使用，不應(yīng)完全兼容和覆蓋所有的瀏覽器，瀏覽器應(yīng)分級支持
  • 漸進(jìn)增強(qiáng)是指在編寫web頁面時(shí)，首先保證最核心的功能實(shí)現(xiàn)，讓任何低端的瀏覽器都能看到頁面內(nèi)容，然后考慮使用高級但是非必要的CSS和Javascript等增強(qiáng)功能，為當(dāng)前和未來的瀏覽器提供更好的支持，給用戶提供更好的體驗(yàn)
  • 優(yōu)雅降級是指在編寫代碼時(shí)，先考慮低端設(shè)備用戶能否看到所有內(nèi)容，然后在此基礎(chǔ)上為高端用戶進(jìn)行設(shè)計(jì)，不僅為高端用戶提供完美用戶體驗(yàn)，也為不同性能等級的用戶提供基本的用戶體驗(yàn)

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

  • reset.css是通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素在顯示時(shí)有相同的視覺效果
  • normalize.css是reset.css的替代方案，保護(hù)有用的瀏覽器默認(rèn)樣式，重置應(yīng)重置的css，修改瀏覽器自身bug，優(yōu)化css可用性
  • 相較于reset.css的“暴力”，normalize.css更加“平和”，使用 normalize.css的好處：
  • normalize.css保護(hù)了有價(jià)值的默認(rèn)值
    • reset通過為幾乎所有的元素施加默認(rèn)樣式，強(qiáng)行使得元素有相同的視覺效果。相比之下，normalize.css保持了許多默認(rèn)的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。當(dāng)一個(gè)元素在不同的瀏覽器中有不同的默認(rèn)值時(shí)，normalize.css會(huì)力求讓這些樣式保持一致并盡可能與現(xiàn)代標(biāo)準(zhǔn)相符合
  • normalize.css修復(fù)了瀏覽器的bug
    • 它修復(fù)了常見的桌面端和移動(dòng)端瀏覽器的bug。這往往超出了reset所能做到的范疇。關(guān)于這一點(diǎn)，normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug
  • normalize.css不會(huì)讓你的調(diào)試工具變的雜亂
    • 使用reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈，在normalize.css中就不會(huì)有這樣的問題，因?yàn)樵谖覀兊臏?zhǔn)則中對多選擇器的使用時(shí)非常謹(jǐn)慎的，我們僅會(huì)有目的地對目標(biāo)元素設(shè)置樣式
  • normalize.css是模塊化的
    • 這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）
  • normalize.css擁有詳細(xì)的文檔
    • normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個(gè)文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試
  • 以上內(nèi)容引用自來，讓我們談一談 Normalize.css

六、IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使IE6、IE7、IE8使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用？

  • IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別：
  • IE盒模型： 寬度（width）=邊框（border）+內(nèi)邊距（padding）+內(nèi)容寬度（content）
  • 標(biāo)準(zhǔn)盒模型：寬度（width）=內(nèi)容寬度（content）
  • IE6、IE7、IE8使用標(biāo)準(zhǔn)盒模型的方法是：給IE6、IE7、IE8都添加doctype聲明時(shí)即可成為標(biāo)準(zhǔn)盒模型
  • box-sizing是一個(gè)事先定義盒模型尺寸解析的方式，其屬性值border-box相當(dāng)于IE的怪異模式，此時(shí)的寬度（width）=邊框（border）+內(nèi)邊距（padding）+內(nèi)容寬度（content），如下代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            background: orange;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            padding: 10px;
            margin: 25px;
        }
        .box{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box"></div>
</body>
</html>

效果圖如下


設(shè)置box-sizing:border-box之后的效果圖

七、操作1：virtualbox安裝xp 虛擬機(jī)

  • Windows下virtualbox安裝xp虛擬機(jī)如下圖


    virtualbox安裝xp虛擬機(jī)
  • virtualbox可以去官網(wǎng)下載Virutalbox
  • xp鏡像文件可以到MSDN，我告訴你下載

八、操作2：在IE6、IE7、IE8中展示 盒模型、inline-block、max-width的區(qū)別

  • 盒模型在IE6、IE7、IE8中，如下代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            background: orange;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            padding: 10px;
            margin: 25px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

  • IE6中，如下圖


    IE6中添加doctype聲明時(shí)效果圖

    IE6中未添加doctype聲明時(shí)效果圖

  • IE7中，如下圖


    IE7中添加doctype聲明時(shí)效果圖

    IE7中未添加doctype聲明時(shí)效果圖

  • IE8中，如下圖


    IE8中添加doctype聲明時(shí)效果圖

    IE8中未添加doctype聲明時(shí)效果圖
  • inline-block在IE6、IE7、IE8中，如下代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div{
            display: inline-block;
        }
        .box1{
            background: orange;
            width: 100px;
            height: 100px;
        }
        .box2{
            background: pink;
            width: 100px;
            height: 100px;
        }
        .box3{
            background: olive;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

  • IE6中，如下圖


    IE6中不能識別inline-block

  • IE7中，如下圖


    IE7中不能識別inline-block

  • IE8中，如下圖


    IE8中能識別inline-block

    注意：在IE6、IE7中行內(nèi)元素能夠識別inline-block

  • max-width在IE6、IE7、IE8中，如下代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>exercise</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        p{
            max-width: 200px;
            height: 200px;
            font-size: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test 
this is a test this is a test this is a test this is a test </p>
</body>
</html>

  • IE6中，如下圖


    IE6中不能識別max-width

  • IE7中，如下圖


    IE7中能識別max-width

  • IE8中，如下圖


    IE8中能識別max-width

版權(quán)聲明：本教程版權(quán)歸鄧攀和饑人谷所有，轉(zhuǎn)載須說明來源！?。?！

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

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

  • 1.如何調(diào)試 IE 瀏覽器 答： 高版本的IE（7以上）存在開發(fā)者工具，可以直接使用調(diào)試。 可以安裝虛擬機(jī)再安裝不...
    呦泥酷閱讀 267評論 0贊 0
  • 一、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺(tái)，可以按F12啟動(dòng)。Paste_Image.p...
    _hello__world_閱讀 565評論 0贊 1
  • 1.如何調(diào)試 IE 瀏覽器 IE8以上有開發(fā)者工具（高版本的IE開發(fā)者工具兼容模式可以往下選擇兼容不同版本），F(xiàn)1...
    饑人谷_kule閱讀 470評論 0贊 0
  • 一、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開發(fā)者工具，IE6可以用border的方法；例：IE11的開發(fā)者工...
    __Qiao閱讀 1,177評論 2贊 17
  • 生日了，又老了一歲。本來過生就想低調(diào)點(diǎn)過去算了，吃完長壽面就知足了，誰知今年潤六月，生日居然要過兩次，大早上母親就...
    大張冰閱讀 248評論 2贊 4

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