任務(wù)13-瀏覽器兼容

一、問(wèn)答部分

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

  • IE7及以上版本有調(diào)試臺(tái)，可以按F12啟動(dòng)。


    Paste_Image.png
  • 沒(méi)有調(diào)試臺(tái)的
    通過(guò)設(shè)置 邊框顏色和背景色進(jìn)行代碼調(diào)試。
  • 通過(guò)安裝模擬器模擬不同版本的ie，微軟官方有諸如virtual pc、Expression Web SuperPreview等。通常用的比較多的ietester。
    能夠集成不同版本的瀏覽器，但是權(quán)威性不足。
  • 虛擬機(jī)，安裝帶有不同版本IE的系統(tǒng)
    對(duì)宿機(jī)要求比較高，安裝成本較高一點(diǎn)。
Paste_Image.png

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

1)、什么是CSS hack

CSS樣式表的在各大瀏覽器中的表現(xiàn)不是完全一樣的，因?yàn)楦鱾€(gè)瀏覽器及瀏覽器各個(gè)版本（如IE6-IE11，chrome，opera，firefox，safari），對(duì)于CSS的解析支持不一樣，這就導(dǎo)致了在不同瀏覽器或者不同版本中，CSS的顯示效果不一樣，這時(shí)我們?yōu)榱双@得一致的CSS效果，就利用一些BUG或者特定樣式去達(dá)到一樣的效果，這個(gè)coding過(guò)程，我們稱(chēng)之為CSS hack。

2)、在 CSS 和 HTML里如何寫(xiě) hack？

CSS Hack大致有3種表現(xiàn)形式：

  • CSS屬性前綴法
    由于IE發(fā)展較早，早期版本對(duì)于CSS的解析有部分沒(méi)加嚴(yán)格限制，成為了歷史遺留問(wèn)題，利用這些BUG可以對(duì)某些CSS屬性寫(xiě)CSS hack以達(dá)到效果。
.container{
            _color: red;/*IE6識(shí)別*/
            *color: red;/*IE6,IE7識(shí)別*/
            color: red\9;/*IE6-IE10識(shí)別*/
            color: red\0;/*IE8-IE10識(shí)別*/
            color: red\9\0;/*IE9,IE10識(shí)別*/
        }
  • 選擇器前綴法
    （即選擇器hack）選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。
 *html{}/*只對(duì)IE6生效*/
 *+html{}/*只對(duì)IE7生效*/
  • IE條件注釋法（即HTML頭部引用if IE）Hack，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
    （即HTML條件注釋hack）：（注：IE10+已經(jīng)不再支持條件注釋?zhuān)┻@類(lèi)hack不僅對(duì)CSS生效，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
  • 只在IE下生效
<!--[if IE]>
        這段文字只在IE瀏覽器顯示
        <![endif]>
  • 只在IE6下生效
<!--[if IE 6]>
        這段文字只在IE6瀏覽器顯示
        <![endif]-->
  • 只在IE6以上版本生效
<!--[if gte IE 6]>
        這段文字只在IE6以上（包括）版本IE瀏覽器顯示
<![endif]-->
  • 只在IE6以下版本生效
<!--[if lte IE 6]>
        這段文字只在IE6以下（包括）版本IE瀏覽器顯示
<![endif]-->
  • 只在IE8上不生效
<!--[if ! IE 8]>
        這段文字在非IE8瀏覽器顯示
<![endif]-->
  • 非IE瀏覽器生效
<!--[if ! IE]>
        這段文字只在非IE瀏覽器顯示
<![endif]-->

3)、在 CSS 中 ie6、ie7的 hack 方式

  • IE6
    • 屬性前綴法
     .box{
         _color: red;/*for IE6*/
     }

 - 選擇器前綴法

*body{}/*for IE6*/

 -  條件注釋法

<!--[if IE 6]>
        <body class="ie6">
<![endif]-->

  • IE7

    • 選擇器前綴法
*+body{}/*for IE7*/

 -  條件注釋法

<!--[if IE 7]>
        <body class="ie7">
 <![endif]-->

  • IE6~IE7

    • 屬性前綴法
.box{
    *color: red;/*for IE6~7*/
}

 - 選擇器前綴法

@media screen\9{...}

 -  條件注釋法

 <!--[if lte IE 7]>
        <body class="ie6 ie7">
 <![endif]-->

4)、ps：

CSS hack現(xiàn)在用的越來(lái)越少，能不用盡量不用，可以用最少的hack去實(shí)現(xiàn)多瀏覽器兼容的頁(yè)面。所以不需要花很大精力去記，有這個(gè)概念，遇到了知道怎么查怎么解決就行。例如星號(hào)是做ie67的hack，下劃線(xiàn)是ie6的hack。

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

  • inline-block
    inline-block對(duì)于IE6、IE7并不支持，解決方法是優(yōu)雅降級(jí)，將display屬性值在IE6、7下寫(xiě)為display: inline;

inline元素的display屬性設(shè)置為inline-block時(shí)，所有的瀏覽器都支持；
block元素的display屬性設(shè)置為inline-block時(shí)，IE6/IE7瀏覽器是不支持的。
解決方式一

*display: inline; /* 將塊級(jí)元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞。*/
*zoom: 1;  /* 觸發(fā)haslayout */

解決方式二
先使用display: inline-block;
屬性觸發(fā)塊級(jí)元素，然后再定義display:inline;，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象。需要注意的是，兩個(gè)display 要先后放在兩個(gè)CSS聲明中才有效果，順序也不能反。

div{
    display: inline-block;
    *display: inline;
 }
  • 透明度bug
    IE8及以下版本不支持opacity屬性，可使用filter:alpha(opacity=50)替代
div{
    filter: alpha(opacity=50);/*for IE*/
    -moz-opacity: 0.5;/*for old versions of the Mozilla browsers*/
    -khtml-opacity: 0.5;  /* for old versions of Safari*/
    opacity: 0.5;
}
  • 雙外邊距浮動(dòng)bug
    這也是很常見(jiàn)的bug，網(wǎng)上給出數(shù)據(jù)出現(xiàn)頻率90%，是IE6和更低版本額雙外邊距浮動(dòng)bug。在設(shè)置好浮動(dòng)后，元素的外邊距加倍
Paste_Image.png
  • 不同瀏覽器的默認(rèn)標(biāo)簽的margin和padding不同
    解決辦法
*{
   margin: 0;
   padding: 0;
}
  • 標(biāo)簽設(shè)置min-height不兼容解決辦法
    如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：
{
   min-height:200px; 
   height:auto!important; 
   height:200px; 
   overflow:visible;
}

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

  • 針對(duì)兼容、多瀏覽器覆蓋有什么看法？CSS作為一種語(yǔ)言，設(shè)計(jì)成有很強(qiáng)的向前兼容性，無(wú)論是瀏覽器覆蓋還是兼容都是解決bug的很好的方式，但是不應(yīng)該過(guò)分信賴(lài)于hack和過(guò)濾器，因?yàn)椴⒎钦莆説ack越多，自己的水平就越高。各個(gè)瀏覽器，各個(gè)版本，以及各個(gè)網(wǎng)頁(yè)html千差萬(wàn)別，動(dòng)一發(fā)則牽全身，所以要明智且受控制地應(yīng)用hack和過(guò)濾器。之所以這么說(shuō)，是因?yàn)槿绻鸆SS文件短小且簡(jiǎn)單，并且只需要應(yīng)用很少個(gè)hack的話(huà)，那么放在主CSS文件中加以注釋說(shuō)明可能是安全的；但是之前說(shuō)過(guò)，hack往往過(guò)于復(fù)雜，使代碼很難閱讀，所以最好將他們放在他們自己的樣式表中，不但容易閱讀，而且便于維護(hù)。但是這樣就增加了工作量，所以建議還是少用hack和過(guò)濾器，能不兼容的地方就不兼容，考慮業(yè)務(wù)需求的情況下合理使用兼容。而至于多瀏覽器覆蓋，我認(rèn)為這個(gè)是可以合理考慮的，而且經(jīng)常用也未嘗不可，畢竟各大瀏覽器用戶(hù)所占份額均不小 ，這點(diǎn)不容忽視。

  • 漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后在針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)。

  • 優(yōu)雅降級(jí)：一開(kāi)始就針對(duì)高版本瀏覽器進(jìn)行頁(yè)面構(gòu)建，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶(hù)體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

  • 使用策略：也許有各種fallback方案可以保證完全兼容性各個(gè)瀏覽器，但依然不能保證低端瀏覽器的使用體驗(yàn)，最多是看起來(lái)各個(gè)瀏覽器都一樣了。因此，現(xiàn)在的設(shè)計(jì)和開(kāi)發(fā)的策略是瀏覽器分級(jí)支持。優(yōu)先為高端瀏覽器設(shè)計(jì)，同時(shí)考慮低端瀏覽器的退化方案。甚至有些復(fù)雜的應(yīng)用可以拒絕ie6，提示用戶(hù)使用高端瀏覽器。

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

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

6. IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE678使用標(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）

  • 怎樣使IE678使用標(biāo)準(zhǔn)盒模型
    IE不添加doctype時(shí)（怪異模式）使用的是IE盒模型，要想使IE678使用標(biāo)準(zhǔn)盒模型，給IE678添加doctype即可。

  • box-sizing: border-box;是CSS3新增屬性，設(shè)置此屬性之后，相當(dāng)于以怪異模式解析。

值 描述
content-box 這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box 為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
inherit 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

box-sizing: border-box;計(jì)算方法為width/height=content+padding+border，表示指定的寬度和高度包含邊框、內(nèi)邊距和內(nèi)容區(qū)域。 即IE盒模型算法。

二、操作部分

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

Paste_Image.png

virtualbox下載
xp鏡像下載

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

  • 在IE6、IE7、IE8中測(cè)試的盒模型代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 100px;
            height: 100px;
            background-color: darkgreen;
            border: solid 1px #000000;
            padding: 20px;
            margin: 30px;
            color: #fffdef;
        }

    </style>
</head>
<body>

<div>
box1
</div>
<div>
    box2
</div>

</body>
</html>

在IE6中渲染如下

有doctype聲明，按標(biāo)準(zhǔn)盒模型解析
沒(méi)有doctype聲明，按IE盒模型解析

在IE7中渲染如下

添加doctype
未添加doctype

在IE8中渲染如下

添加doctype
未添加doctype
  • 在IE6、IE7、IE8中測(cè)試的inline-block代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            display: inline-block;
        }

        .box1{
            background: green;
            width: 100px;
            height: 100px;
        }

        .box2{
            background: blue;
            width: 100px;
            height: 100px;
        }

        .box3{
            background: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>

<div class="box1">
box1
</div>
<div class="box2">
    box2
</div>
<div class="box3">
    box3
</div>

</body>
</html>

在IE6中渲染如下

不能識(shí)別inline-block

在IE7中渲染如下

不能識(shí)別inline-block

在IE8中渲染如下

能識(shí)別inline-block
  • 在IE6、IE7、IE8中測(cè)試的max-width代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            display: inline-block;
        }

        .box1{
            max-width: 100px;
            height: 100px;
            height: 100px;
            border: 1px solid red;
        }


    </style>
</head>
<body>

<div class="box1">
box1box 1box1box1b ox1box1box1box1 box1box1
    box1 box1box1 box1box1 box1box1 box1
    box1 box1box1 box1box1 box1
    box1 box1box1 box1
    box1box 1box1box1b ox1box1box1box1 box1box1
    box1 box1box1 box1box1 box1box1 box1
    box1 box1box1 box1box1 box1
    box1 box1box1 box1
</div>


</body>
</html>

在IE6中渲染如下

不能識(shí)別max-width

在IE7中渲染如下

能識(shí)別max-width

在IE8中渲染如下

能識(shí)別max-width

** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說(shuō)明來(lái)源！ **

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1.如何調(diào)試 IE 瀏覽器 IE8以上有開(kāi)發(fā)者工具（高版本的IE開(kāi)發(fā)者工具兼容模式可以往下選擇兼容不同版本），F(xiàn)1...
    饑人谷_kule閱讀 426評(píng)論 0贊 0
  • 一、問(wèn)答部分： 1. 如何調(diào)試 IE 瀏覽器? 如果是IE7版本以上可以使用自帶的開(kāi)發(fā)者工具，按F12，即可打開(kāi)：...
    小木子2016閱讀 552評(píng)論 0贊 0
  • 1.如何調(diào)試IE瀏覽器? 對(duì)于高版本的IE瀏覽器（IE7以上）可以使用IE自帶的開(kāi)發(fā)者工具，如下圖： 使用一些集成...
    饑人谷_任磊閱讀 388評(píng)論 0贊 1
  • 1 . 如何調(diào)試 IE 瀏覽器 使用高版本的IE瀏覽器控制臺(tái)。 如果某個(gè)元素不見(jiàn)了，可以使用如下方法：a.給該元素...
    osborne閱讀 400評(píng)論 0贊 1
  • 2016/6/6 可以裝個(gè)虛擬機(jī)，用于調(diào)試IE的兼容 1.如何調(diào)試 IE 瀏覽器 IE瀏覽器7以上+自帶的開(kāi)發(fā)者工...
    嘿菠蘿閱讀 335評(píng)論 0贊 0