任務十三~瀏覽器兼容

一、如何調試 IE 瀏覽器？

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


    IE7以上調試工具

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

  • 可以使用模擬器進行調試，比如virtual pc、Expression Web SuperPreview、ietester

  • 通過安裝虛擬機的方法調試，如下圖


    虛擬機調試

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

  • CSS hack由于不同廠商的瀏覽器，比如IE,Safari,Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器抑或也可以反過來利用CSS hack為不同瀏覽器版本編寫不同的CSS效果（整理自百度百科）
  • CSS 和 HTML里hack寫法：
  • HTML里IE條件注釋
    • IE6下
    <!--[if IE 6]>
          <p>這里的內容只會在IE6中顯示</p>
        <![endif]-->
    • IE6上
    <!--[if gte IE 6]>
          <p>這里的內容會在IE6以上版本顯示</p>
        <![endif]-->
    • IE中
    <!--[if IE]>
          <p>這里的內容會在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中 */  
}
  • 選擇器前綴法，針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行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中條件注釋的內容并未顯示，更不用說為其設置的顏色！！
  • 在 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中的支持程度，在之前的代碼中補上如下代碼
.center{
                width: 300px;
                height: 300px;
                background: orange;
                opacity: 0.4;
            }

在IE7中顯示效果如下


opacity在IE7中顯示效果

而在現代瀏覽器中的顯示效果如下


opacity在chrome中顯示效果

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

此時在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中顯示效果圖

而在現代瀏覽器中的顯示效果如下


inline-block在chrome中顯示效果圖

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

此時在IE7中的顯示效果如下圖


inline-block在IE7hack后顯示效果圖
  • IE6中浮動元素添加margin時左外邊距的雙倍問題，如下代碼
<!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中顯示效果如下


雙外邊距問題

而在現代瀏覽器中的顯示效果


chrome無雙外邊距問題

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

此時在IE7中的顯示效果如下圖


解決浮動左外邊距雙倍問題后效果圖

四、針對兼容、多瀏覽器覆蓋有什么看法？漸進增強和優雅降級是什么意思？

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

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

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

六、IE盒模型和標準盒模型有什么區別? 怎樣使IE6、IE7、IE8使用標準盒模型?box-sizing:border-box有什么作用？

  • IE盒模型和標準盒模型的區別：
  • IE盒模型： 寬度（width）=邊框（border）+內邊距（padding）+內容寬度（content）
  • 標準盒模型：寬度（width）=內容寬度（content）
  • IE6、IE7、IE8使用標準盒模型的方法是：給IE6、IE7、IE8都添加doctype聲明時即可成為標準盒模型
  • box-sizing是一個事先定義盒模型尺寸解析的方式，其屬性值border-box相當于IE的怪異模式，此時的寬度（width）=邊框（border）+內邊距（padding）+內容寬度（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>

效果圖如下


設置box-sizing:border-box之后的效果圖

七、操作1：virtualbox安裝xp 虛擬機

  • Windows下virtualbox安裝xp虛擬機如下圖


    virtualbox安裝xp虛擬機
  • virtualbox可以去官網下載Virutalbox
  • xp鏡像文件可以到MSDN，我告訴你下載

八、操作2：在IE6、IE7、IE8中展示 盒模型、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;
        }
        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聲明時效果圖

    IE6中未添加doctype聲明時效果圖

  • IE7中，如下圖


    IE7中添加doctype聲明時效果圖

    IE7中未添加doctype聲明時效果圖

  • IE8中，如下圖


    IE8中添加doctype聲明時效果圖

    IE8中未添加doctype聲明時效果圖
  • 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中行內元素能夠識別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

版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

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