瀏覽器兼容、CSS hack、normalize.css及盒模型基礎(chǔ)知識問答

一、問題

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

1、對于IE7及以下版本可采用IETester（不能測腳本，模擬出來的IE6平臺與真實(shí)的IE6還是有差異的，結(jié)果不完全可靠）、Expression Web SuperPreview（微軟官方軟件，可視化調(diào)試工具，用于跨瀏覽器測試https://www.microsoft.com/zh-CN/download/details.aspx?id=2020 ） 、Internet Explorer Collection（讓你同時(shí)擁有IE1-IE8）、安裝虛擬機(jī)的方式（微軟給出了免費(fèi)的各個(gè)瀏覽器及各系統(tǒng)虛擬機(jī)的系統(tǒng)鏡像文件）、使用border的方式或使用IEDevToolBar/IE Developer Tool或IE Watch軟件進(jìn)行調(diào)試；如果目標(biāo)用戶群體有使用IE7及以下版本，建議安裝虛擬機(jī)進(jìn)行調(diào)試，有些軟件雖然能夠模擬，但是畢竟不是真實(shí)的環(huán)境；

2、對于IE8及以上，可以使用自帶的調(diào)試工具調(diào)試；

另：

  • 在搜索資料時(shí)發(fā)現(xiàn)一個(gè)好玩的網(wǎng)站http://browsershots.org/ 該網(wǎng)站支持不同操作系統(tǒng)的各個(gè)版本瀏覽器（不含IE。。。。）瀏覽目標(biāo)網(wǎng)站截圖查詢。
  • https://www.browserling.com/ 這個(gè)網(wǎng)站也類似，支持Windows各個(gè)版本下的各個(gè)瀏覽器各個(gè)版本的在線測試；
  • 讓IE6-9共存的推薦方法：virtual PC 打造IE6、IE7、IE9等多版本共存原版測試環(huán)境 這里面是安裝虛擬機(jī)Windows Virtual PC及RemoteApp程序包，然后采用映射的方法使得這幾個(gè)IE軟件共存；
（二）、什么是CSS hack？在 CSS 和 HTML里如何寫 hack？在 CSS 中 ie6、ie7的 hack 方式？

由于不同廠家的瀏覽器或這同一廠家某些不同版本的瀏覽器對css的解析認(rèn)識不一致，導(dǎo)致同一頁面不同的顯示結(jié)果，為了能夠統(tǒng)一或盡量統(tǒng)一顯示結(jié)果，我們需針對不同瀏覽器寫不同的css，這樣的過程就叫做css hack；

在html和css中寫hack有如下三種方式

  • 第一種、類內(nèi)屬性前綴方式
    比如：
    1、在color前面加_ 只有IE6能夠識別，IE7不能夠識別；
    2、在color前面加*只有IE6及IE7能夠識別；
    3、在color:red; red的后面加\9，即color:red\9;則有IE6-IE10能夠識別；
    4、在color:red; red的后面加\0，即color:red\0;則只有IE8-IE10能夠識別；

  • 第二種、選擇器前綴方式
    比如：
    1、*****html 只有IE6才能夠識別；
    2、***+html 只有IE7才能夠識別；

@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
等等
結(jié)合CSS3的一些選擇器，如html:first-child，body:nth-of-type(1)，衍生出更多的hack方式; 具體詳見http://blog.csdn.net/freshlover/article/details/12132801

  • 第三種 IE條件注釋方式
    例如：
只在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]-->
只在IE6以上版本生效
<!--[if gt IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE6以下版本生效
<!--[if lt IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
只在IE6及以下版本生效
<!--[if lte IE 6]>
這段文字只在IE6以上(包括)版本IE瀏覽器顯示
<![endif]-->
非IE瀏覽器生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->

以上less-than（小于）簡寫成lt；less-than or equal（小于或等于）簡寫成lte；greater-than（大雨）簡寫成gt；greater-than or equal（大于或等于）簡寫成gte；
另：對于IE的條件注釋，IE10及以上不再支持。

條件注釋應(yīng)注意的地方1.png
條件注釋應(yīng)注意的地方2.png

這個(gè)網(wǎng)上收集了很多ie的hack，具體詳見：http://browserhacks.com/

需要特別說明的是，能不使用hack最好不要使用hack；

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

1、display:inline-block

Paste_Image.png

該屬性IE8以下不支持，可在后面添加*display:inline；
2、各個(gè)瀏覽器的默認(rèn)的內(nèi)外邊距不一致，可采用在樣式中設(shè)置

*{
margin:0; 
padding:0;
}

3、min-height
該屬性在IE7以下不支持，可使用如下方法：

p{
overflow: hidden;_overflow: visible;min-height: 22px;height: auto!important;height: 22px;
}
Paste_Image.png

4、opacity
IE8以下不支持該屬性，可使用filter:alpha(opacity=50); 替代；

Paste_Image.png
（四）、針對兼容、多瀏覽器覆蓋有什么看法？漸進(jìn)增強(qiáng)和優(yōu)雅降級是什么意思？
  • 看法：開發(fā)網(wǎng)站前需大體了解目標(biāo)用戶群體的構(gòu)成及他們可能所采用瀏覽器的廠商及版本，盡量做到多瀏覽器兼容，如果少數(shù)用戶群體實(shí)在兼容不了可采用提醒用戶升級瀏覽器的方法或者在編寫代碼時(shí)確保該群體用戶在瀏覽網(wǎng)頁時(shí)能夠正常瀏覽及操作即可，不必特意追求完美，強(qiáng)求每個(gè)瀏覽器每個(gè)版本都顯示的一模一樣，因?yàn)楦鳛g覽器也有無法解決的兼容性BUG或者由于時(shí)間、人力等因素?zé)o法滿足該要求；
  • 漸進(jìn)增強(qiáng)：先針對低版本瀏覽器進(jìn)行頁面構(gòu)建，保證最基本的功能，再針對高版本瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能，以達(dá)到更好的用戶體驗(yàn)；
  • 優(yōu)雅降級：一開始就針對高版本瀏覽器進(jìn)行頁面構(gòu)建，然后再針對低版本瀏覽器進(jìn)行兼容；

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

“優(yōu)雅降級”觀點(diǎn)
“優(yōu)雅降級”觀點(diǎn)認(rèn)為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。
在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

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

reset.css的作用是全部重置各瀏覽器默認(rèn)樣式，而normalize.css則是可以使元素的渲染在多個(gè)瀏覽器下都能保持一致并且符合規(guī)范，而不是暴力的一概全部重置樣式；
推薦使用normalize的理由是：

  1. 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)相符合。
  2. 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。可以看以下這個(gè)例子，看看對于HTML5中新出現(xiàn)的input類型search
    ，Normalize.css是如何保證跨瀏覽器的一致性的。
/**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}
/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

  1. Normalize.css 不會(huì)讓你的調(diào)試工具變的雜亂
    使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css
    中就不會(huì)有這樣的問題，因?yàn)樵谖覀兊臏?zhǔn)則中對多選擇器的使用時(shí)非常謹(jǐn)慎的，我們僅會(huì)有目的地對目標(biāo)元素設(shè)置樣式。


    A common sight in browser debugging tools when using a CSS reset
  2. Normalize.css 是模塊化的
    這個(gè)項(xiàng)目已經(jīng)被拆分為多個(gè)相關(guān)卻又獨(dú)立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠(yuǎn)不會(huì)用到部分（比如表單的一般化）。
  3. Normalize.css 擁有詳細(xì)的文檔
    Normalize.css的代碼基于詳細(xì)而全面的跨瀏覽器研究與測試。這個(gè)文件中擁有詳細(xì)的代碼說明并在Github Wiki中有進(jìn)一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進(jìn)行自己的測試。
    這個(gè)項(xiàng)目的目標(biāo)是幫助人們了解瀏覽器默認(rèn)是如何渲染元素的，同時(shí)也讓人們很容易地明白如何改進(jìn)瀏覽器渲染。
    6、使用normalize在性能方面也要優(yōu)于reset.css ；

那么如何使用normalize呢？
首先，安裝或從Github下載Normalize.css，接下來有兩種主要途徑去使用它。
策略一：將normalize.css
作為你自己項(xiàng)目的基礎(chǔ)CSS，自定義樣式值以滿足設(shè)計(jì)師的需求。
策略二：引入normalize.css
源碼并在此基礎(chǔ)上構(gòu)建，在必要的時(shí)候用你自己寫的CSS覆蓋默認(rèn)值。
以上部分內(nèi)容摘自：http://jerryzou.com/posts/aboutNormalizeCss/

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

區(qū)別是：IE盒模型中width及height的數(shù)值并不是指content的width及height的數(shù)值而是指padding+border+content的width和height的數(shù)值（這個(gè)時(shí)候內(nèi)邊距和邊框?qū)?huì)包括在盒子中），但w3c盒模型即標(biāo)準(zhǔn)盒模型則是指content的數(shù)值；
IE6、7、8在不添加doctype的情況下（怪異模式）使用IE盒模型；
IE6、7、8在添加doctype的情況下，IE9及以上和chrome 使用W3C盒模型即標(biāo)準(zhǔn)盒模型；

  box-sizing: border-box;

作用是為元素設(shè)定的任何內(nèi)邊距及邊框均在設(shè)定的寬度和高度中進(jìn)行繪制，也就是 所有元素輸入的height及width數(shù)值即為content+padding+border的height及width的數(shù)值），這樣可方便計(jì)算；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    div{
        background-color: red;
        width: 100px;
        height: 50px;
        border: 5px solid blue;
        margin: 50px auto;
        padding: 10px;
    }
    /*
          *{
        box-sizing:border-box;
    } 
       */
      
    </style> 
</head>
<body>
    <div class="outside1"> 這是div1 </div>
    <div class="inside1"> 這是div2 </div>
    
</body>
</html>

上述代碼運(yùn)行如下：


未加box-sizing.png

此時(shí)height及width數(shù)值與content的height及width的數(shù)值是相符合的；

若去掉注釋后，則運(yùn)行結(jié)果如下：


加了box-sizing.png

此時(shí)height及width數(shù)值與content的height及width的數(shù)值是不相符合的，其為content的寬（高）數(shù)值加上padding及border寬（高）之和的兩倍；

兼容性在caniuse.com查詢結(jié)果如下：

box-sizing兼容性.png

兼容性在MDN查詢情況（老資料）見下圖：

  • 桌面端：


    電腦端兼容性.png

  • 手機(jī)端：

手機(jī)端兼容性.png

兼容性情況說明引自MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

另：1、firefox支持替代的-moz-box-sizing屬性；
2、box-sizing 默認(rèn)值為content-box；

二、操作

（一）virtualbox 安裝 xp 虛擬機(jī)
mac
windows

由于在上大學(xué)的時(shí)候用 vmware workstation裝過xp，這次用virtualbox來裝Linux操作系統(tǒng)，雖然很早就知道Linux操作系統(tǒng)，但自己從來沒親自接觸過，基礎(chǔ)現(xiàn)在的電腦配置較低（只有2G的內(nèi)存及酷睿i3的處理器），故查詢了相關(guān)資料，我選擇了很小巧的Lubuntu系統(tǒng)（Lubuntu是新的Ubuntu Linux桌面系統(tǒng)計(jì)劃，其默認(rèn)桌面環(huán)境為LXDE，特別適用于配備老舊的電腦。和Xubuntu、Ubuntu Lite一樣，都是屬于追求輕巧的Ubuntu分支）。在安裝時(shí)出現(xiàn)了花屏的現(xiàn)象，后通過查詢資料得以解決。。。安裝完后，使用了下，感覺算挺順暢的~ （比以前安裝的xp虛擬機(jī)順暢很多）

Lubuntu操作系統(tǒng).png

（二）在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的區(qū)別。

寫了一個(gè)代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .div1,.div2,.div3,.div4{
        height: 100px;
        width: 100px;
        padding: 50px;
        border: 10px solid red;
        margin: 50px;
        background-color: blue;
        display: inline-block;      
    }
    .div5{
        background-color: yellow;
        height: 200px;
        max-width: 200px;

    }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>

    
</body>
</html>

若不把上述代碼中的<!DOCTYPE html>注釋/刪除掉，則
1、盒模型方面區(qū)別

IE6和IE7的結(jié)果.png
IE8的結(jié)果.png

單純比較盒模型這三個(gè)瀏覽器沒區(qū)別；與之前所提到的情況相符；

2、inline-block方面
顯然在IE6和IE7中，inline-block不起作用，但在IE8中起作用，這個(gè)結(jié)果也與之前在caniuse.com所查詢的結(jié)果相符合；

3、max-width方面

將上述代碼改為:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .div1,.div2,.div3,.div4{
    height: 100px;
    width: 100px;
    padding: 50px;
    border: 10px solid red;
    margin: 50px;
    background-color: blue;
    display: inline-block;    
  }
  .div5{
    background-color: yellow;
    max-width: 200px;

  }

  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5">
    該屬性值會(huì)對元素的寬度設(shè)置一個(gè)最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負(fù)值。 該屬性值會(huì)對元素的寬度設(shè)置一個(gè)最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負(fù)值。 該屬性值會(huì)對元素的寬度設(shè)置一個(gè)最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負(fù)值。 
  </div>

  
</body>
</html>
IE6與IE7的結(jié)果.png
IE8的結(jié)果.png

IE6無法識別max-width，IE11自帶的開發(fā)者工具仿真IE7及使用Expression Web SuperPreview以IE7瀏覽器查看時(shí)，能夠識別max-width，IE8也能夠識別；這一點(diǎn)與前面在caniuse.com上查詢的結(jié)果相符合；
注：以上均僅是模擬瀏覽器，測試塊級元素div的結(jié)果，若要嚴(yán)格測試，則應(yīng)在不同IE版本的各系統(tǒng)上進(jìn)行測試，同時(shí)也應(yīng)測試行內(nèi)元素；

**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處。謝謝！ *

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,114評論 1贊 92
  • 一、如何調(diào)試 IE 瀏覽器？ 在IE7以上的版本中可以通過按快捷鍵F12調(diào)出開發(fā)人員調(diào)試框，如下圖IE7以上調(diào)試工...
    dengpan閱讀 650評論 0贊 2
  • 一、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺，可以按F12啟動(dòng)。Paste_Image.p...
    _hello__world_閱讀 565評論 0贊 1
  • 1.如何調(diào)試 IE 瀏覽器 IE7以上（包括Edge)自帶開發(fā)者工具。Edge： 安裝虛擬機(jī)，安裝各種不同版本的I...
    26d608950683閱讀 1,813評論 0贊 5
  • 一、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開發(fā)者工具，IE6可以用border的方法；例：IE11的開發(fā)者工...
    __Qiao閱讀 1,178評論 2贊 17

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