任務13-瀏覽器兼容

1.如何調試IE瀏覽器?

  • 對于高版本的IE瀏覽器（IE7以上）可以使用IE自帶的開發者工具，如下圖：
IE9開發者工具
  • 使用一些集成IE版本的測試工具，例如SuperPreview、IEtester等，但是模擬的效果有缺陷，不能保證網頁運行在真正的IE瀏覽器上沒有問題。
  • 使用虛擬機安裝IE瀏覽器，這種方法是最穩妥的，直接安裝你所需要調試的IE瀏覽器版本。
    如下圖：
虛擬機IE6瀏覽器

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

  • CSS hack由于不同的廠商的瀏覽器，比如Internet Explorer，Safari，Mozilla，Firefox，chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此對導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。

  • CSS Hack大致有3中表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
  • 屬性前綴法（即類內部Hack）：例如IE6能識別下劃線和星號，IE7能識別星號，但不能識別下劃線，IE6~IE10都認識“\9”,但是firefox前述三個都不能識別。
  • 選擇器前綴法（即選擇器HACK）：例如IE6能識別html.class{}，IE7能識別+html.class{}或者*。first-child+html.class{}
    3 IE條件注釋法（即HTML條件注釋Hack）：針對所有IE（注：IE10+已經不再支持條件注釋）：,針對IE6及以下版本，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。例如：
    只在IE瀏覽器中生效：
<!--[if IE]> 
<p>這段代碼只會在IE瀏覽器中生效</p>
<![endif]-->

只在IE6中生效：

<!--[if IE 6]>
 <p>這段代碼只會在IE6瀏覽器中生效</p>
<![endif]-->

只在有IE6以上版本生效：

<!--[if gte IE 6]>
<p>這段代碼只在IE6及以上版本IE瀏覽器生效</p>
<![endif]-->

關于條件注釋法的各種操作符可以參考課件條件注釋，不需要記住所有的內容，了解就行。

  • CSS中IE6的hack方式
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie6</title>
        <style type="text/css">
            div p{
                _color: red;
            }/* 屬性前綴法 */
            *html div h1{
                color: red;
            }/* 選擇器注釋法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 6]>
            <p>You are using Internet Explorer 6.</p>
            <![endif]-->
            <!-- 條件注釋法 -->
        </div>
    </body>
</html>

先看這段代碼在非IE6瀏覽器中的顯示：

非IE6瀏覽器

從上圖可以看出，針對IE6設置的Hack在非IE6瀏覽器中沒有生效。
再看IE6瀏覽器中的顯示：

IE6

很明顯，在IE6中Hack生效了。

  • CSS中IE7的hack方式
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for ie7</title>
        <style type="text/css">
            div p{
                *color: red;
            }/* 屬性前綴法 */
            *+html div h1{
                color: red;
            }/* 選擇器注釋法 */
        </style>
    </head>
    <body>
        <div>
            <h1>hello world</h1>
            <!--[if IE 7]>
            <p>You are using Internet Explorer 7.</p>
            <![endif]-->
            <!-- 條件注釋法 -->
        </div>
    </body>
</html>

看看這段代碼在IE6和IE7中的顯示對比：

對比

很明顯，這段代碼中的Hack只在IE7中生效。

更多的CSS hack方式可以參考以下資料：
史上最全的CSS hack方式一覽
BROWSERHACKS
需要注意的是，CSS hack不是萬能，用的越多，bug越多，所以一個良好的具有兼容性的頁面代碼應該只有少量的hack。在寫頁面代碼的時候如果有兼容性要求，就盡量使用兼容性好的CSS屬性，在源頭上就消除這些問題。

3.列舉幾種瀏覽器兼容問題。

  • opacity
    先在caniuse上查詢


    opacity

    可以看到opacity在IE8中是部分兼容，IE7以下是不支持的。如下圖：

ie7不支持opacity

經過查詢可以使用filter:Alpha(opacity=40)來設置IE的元素透明度，如下圖：

使用filter兼容IE
  • inline-block
    先查詢它的兼容性，如下圖：

inline-block的兼容性

可以看到IE8以下的IE瀏覽器是部分支持該屬性的，即塊級元素display：inline-block是不支持的，行內元素display：inline-block是支持的。

Paste_Image.png

添加如下代碼解決兼容問題

*display:inline;

*zoom:1;
ie7兼容inline-block

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

  • 兼容的問題：首先，在開發網頁的時候，由于時間成本的原因，不可能做到全瀏覽器都兼容。所以在開發之前就要做一個統計，統計你的用戶群體使用的是什么瀏覽器。假如某一款瀏覽器的使用比例超過了5%（這個數字不固定，每個項目的要求不一樣），你就需要針對這款瀏覽器做兼容處理了。
    參考怎樣可以很好地保證網頁的瀏覽器兼容性？
  • 漸進增強和優雅降級
    • 漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
  • 優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
  • 區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰退）意味著往回看，而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
    參考優雅降級和漸進增強的區別

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

  • reset.css和normalize.css的作用
    HTML標簽在瀏覽器中都有默認的樣式，不幸的是，不同的瀏覽器的默認樣式之間是存在區別的，例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin來實現的，而在Firefox下卻是由padding來實現的。所以開發時瀏覽器的默認樣式可能會給我們帶來多瀏覽器的兼容問題，影響開發效率。
    reset.css和normaliz.css都是用來將瀏覽器的默認樣式覆蓋掉，達到多個瀏覽器的一致性。

  • 推薦使用normalize.css的原因

    • normalize.css保護了有價值的默認值
      reset是通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。而normaliz,css顯得更溫和一點，保持了許多默認的瀏覽器樣式。

  • normalize.css修復了瀏覽器的bug
    它修復了常見的桌面端和移動端瀏覽器的bug，這超出了reset所能做到的范疇。

  • normalize.css不會讓你的調試工具變得雜亂
    使用reset會在瀏覽器調試工具中有大段的繼承鏈，而 normalize.css不會。
    參考：讓我們談一談 Normalize.css
    知乎: Normalize.css 與傳統的 CSS Reset 有哪些區別

6.IE盒模型和標準盒模型有什么區別？怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用

  • IE盒模型的width（height）屬性是內容區、內邊距和邊框的寬度（高度）總和。如下圖：
IE盒模型
  • 標準盒模型的width（height）屬性是指內容區的寬度（高度）。如下圖：
標準盒子模型
  • 怎樣使 IE678使用標準盒模型?
    添加doctype聲明，使IE678使用標準模式，就會使用標準盒模型。反之，如果不添加doctype聲明，使IE678進入怪異模式，它就會使用IE盒模型。
  • box-sizing:border-box
    box-sizing是CSS3的屬性，簡單來說用來設置要使用哪種盒模型。默認值是content-box，即 Element width = width ，指的就是標準盒模型。
    而另一個值：border-box，即 ( Element width = width + border + padding)，也就是IE盒模型。

8.virtualbox 安裝 xp 虛擬機

IE6安裝

安裝的過程還是比較麻煩的，所以貼一個鏈接，方便以后再安裝：VirtualBox虛擬機：[3]安裝Ghost XP。

9.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的區別

  • 盒模型：
  • ie6
標準模式下

怪異模式下

  • ie7


    標準模式下
怪異模式下

  • ie8


    標準模式下
怪異模式下

從上面的圖片可以看出IE盒模型和標準盒模型的區別。

  • 塊元素的inline-block

    • ie6


      ie6不支持塊元素inline-block

    • ie7


      ie7不支持塊元素inline-block

  • ie8


    ie8支持塊元素inline-block屬性
  • 行內元素的inline-block

    • ie6


      ie6支持行內元素inline-block

  • ie7


    ie7支持行內元素inline-block

  • ie8


    ie8支持行內元素inline-block
  • max-width

  • ie6


    ie6不支持max-width

  • ie7


    ie7支持max-width

  • ie8


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

推薦閱讀更多精彩內容

  • 一、問答部分 1. 如何調試 IE 瀏覽器 IE7及以上版本有調試臺，可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 484評論 0贊 1
  • 一、問答部分： 1. 如何調試 IE 瀏覽器? 如果是IE7版本以上可以使用自帶的開發者工具，按F12，即可打開：...
    小木子2016閱讀 552評論 0贊 0
  • 1.如何調試 IE 瀏覽器 IE8以上有開發者工具（高版本的IE開發者工具兼容模式可以往下選擇兼容不同版本），F1...
    饑人谷_kule閱讀 426評論 0贊 0
  • 2016/6/6 可以裝個虛擬機，用于調試IE的兼容 1.如何調試 IE 瀏覽器 IE瀏覽器7以上+自帶的開發者工...
    嘿菠蘿閱讀 335評論 0贊 0
  • 1 . 如何調試 IE 瀏覽器 使用高版本的IE瀏覽器控制臺。 如果某個元素不見了，可以使用如下方法：a.給該元素...
    osborne閱讀 400評論 0贊 1