一撒犀、問(wèn)題

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

1、對(duì)于IE7及以下版本可采用IETester（不能測(cè)腳本或舞，模擬出來(lái)的IE6平臺(tái)與真實(shí)的IE6還是有差異的荆姆，結(jié)果不完全可靠）、Expression Web SuperPreview（微軟官方軟件映凳，可視化調(diào)試工具胆筒，用于跨瀏覽器測(cè)試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)用戶(hù)群體有使用IE7及以下版本矫渔，建議安裝虛擬機(jī)進(jìn)行調(diào)試彤蔽，有些軟件雖然能夠模擬，但是畢竟不是真實(shí)的環(huán)境庙洼；

2铆惑、對(duì)于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)站截圖查詢(xún)。
• https://www.browserling.com/ 這個(gè)網(wǎng)站也類(lèi)似碌补，支持Windows各個(gè)版本下的各個(gè)瀏覽器各個(gè)版本的在線測(cè)試虏束；
• 讓IE6-9共存的推薦方法：virtual PC 打造IE6、IE7厦章、IE9等多版本共存原版測(cè)試環(huán)境 這里面是安裝虛擬機(jī)Windows Virtual PC及RemoteApp程序包镇匀，然后采用映射的方法使得這幾個(gè)IE軟件共存；
  

（二）袜啃、什么是CSS hack汗侵？在 CSS 和 HTML里如何寫(xiě) hack？在 CSS 中 ie6、ie7的 hack 方式晰韵？

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

在html和css中寫(xiě)hack有如下三種方式

• 第一種只恨、類(lèi)內(nèi)屬性前綴方式
  比如：
  1译仗、在color前面加_ 只有IE6能夠識(shí)別，IE7不能夠識(shí)別官觅；
  2古劲、在color前面加*只有IE6及IE7能夠識(shí)別；
  3缰猴、在color:red; red的后面加\9产艾，即color:red\9;則有IE6-IE10能夠識(shí)別；
  4滑绒、在color:red; red的后面加\0闷堡，即color:red\0;則只有IE8-IE10能夠識(shí)別；

• 第二種疑故、選擇器前綴方式
  比如：
  1杠览、*****html 只有IE6才能夠識(shí)別；
  2纵势、***+html 只有IE7才能夠識(shí)別踱阿；

@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
等等
結(jié)合CSS3的一些選擇器，如html:first-child钦铁，body:nth-of-type(1)软舌，衍生出更多的hack方式; 具體詳見(jiàn)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（小于）簡(jiǎn)寫(xiě)成lt；less-than or equal（小于或等于）簡(jiǎn)寫(xiě)成lte牛曹；greater-than（大雨）簡(jiǎn)寫(xiě)成gt佛点；greater-than or equal（大于或等于）簡(jiǎn)寫(xiě)成gte；
另：對(duì)于IE的條件注釋?zhuān)琁E10及以上不再支持黎比。

條件注釋?xiě)?yīng)注意的地方1.png

條件注釋?xiě)?yīng)注意的地方2.png

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

需要特別說(shuō)明的是，能不使用hack最好不要使用hack阅虫；

（三）演闭、列舉幾種 瀏覽器兼容問(wèn)題

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

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

• 看法：開(kāi)發(fā)網(wǎng)站前需大體了解目標(biāo)用戶(hù)群體的構(gòu)成及他們可能所采用瀏覽器的廠商及版本惊橱，盡量做到多瀏覽器兼容，如果少數(shù)用戶(hù)群體實(shí)在兼容不了可采用提醒用戶(hù)升級(jí)瀏覽器的方法或者在編寫(xiě)代碼時(shí)確保該群體用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)能夠正常瀏覽及操作即可箭昵，不必特意追求完美税朴，強(qiáng)求每個(gè)瀏覽器每個(gè)版本都顯示的一模一樣，因?yàn)楦鳛g覽器也有無(wú)法解決的兼容性BUG或者由于時(shí)間家制、人力等因素?zé)o法滿(mǎn)足該要求正林；
• 漸進(jìn)增強(qiáng)：先針對(duì)低版本瀏覽器進(jìn)行頁(yè)面構(gòu)建，保證最基本的功能颤殴，再針對(duì)高版本瀏覽器進(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í)保證其根基處于安全地帶棘催。

“優(yōu)雅降級(jí)”觀點(diǎn)
“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)劲弦、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段醇坝，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE邑跪、Mozilla 等）的前一個(gè)版本次坡。
在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 (poor, but passable)” 的瀏覽體驗(yàn)画畅。你可以做一些小的調(diào)整來(lái)適應(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)建其“分級(jí)式瀏覽器支持 (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通過(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)相符合。
2. 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意推《固保可以看以下這個(gè)例子，看看對(duì)于HTML5中新出現(xiàn)的input類(lèi)型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;
}

3. 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è)置樣式。

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

那么如何使用normalize呢？
首先费坊，安裝或從Github下載Normalize.css倒槐，接下來(lái)有兩種主要途徑去使用它。
策略一：將normalize.css
作為你自己項(xiàng)目的基礎(chǔ)CSS附井，自定義樣式值以滿(mǎn)足設(shè)計(jì)師的需求讨越。
策略二：引入normalize.css
源碼并在此基礎(chǔ)上構(gòu)建，在必要的時(shí)候用你自己寫(xiě)的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查詢(xún)結(jié)果如下：

box-sizing兼容性.png

兼容性在MDN查詢(xún)情況（老資料）見(jiàn)下圖：

• 桌面端：

  
  
  電腦端兼容性.png

• 手機(jī)端：

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

兼容性情況說(shuō)明引自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裝過(guò)xp，這次用virtualbox來(lái)裝Linux操作系統(tǒng)速缨，雖然很早就知道Linux操作系統(tǒng)锌妻，但自己從來(lái)沒(méi)親自接觸過(guò)，基礎(chǔ)現(xiàn)在的電腦配置較低（只有2G的內(nèi)存及酷睿i3的處理器）旬牲，故查詢(xún)了相關(guān)資料仿粹，我選擇了很小巧的Lubuntu系統(tǒng)（Lubuntu是新的Ubuntu Linux桌面系統(tǒng)計(jì)劃，其默認(rèn)桌面環(huán)境為L(zhǎng)XDE原茅，特別適用于配備老舊的電腦吭历。和Xubuntu、Ubuntu Lite一樣擂橘，都是屬于追求輕巧的Ubuntu分支）晌区。在安裝時(shí)出現(xiàn)了花屏的現(xiàn)象，后通過(guò)查詢(xún)資料得以解決通贞。朗若。。安裝完后滑频，使用了下捡偏，感覺(jué)算挺順暢的~ （比以前安裝的xp虛擬機(jī)順暢很多）

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

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

寫(xiě)了一個(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è)瀏覽器沒(méi)區(qū)別彤避；與之前所提到的情況相符；

2夯辖、inline-block方面
顯然在IE6和IE7中琉预，inline-block不起作用，但在IE8中起作用蒿褂，這個(gè)結(jié)果也與之前在caniuse.com所查詢(xún)的結(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ì)對(duì)元素的寬度設(shè)置一個(gè)最高限制。因此娄帖，元素可以比指定值窄也祠，但不能比其寬。不允許指定負(fù)值近速。 該屬性值會(huì)對(duì)元素的寬度設(shè)置一個(gè)最高限制诈嘿。因此，元素可以比指定值窄削葱，但不能比其寬奖亚。不允許指定負(fù)值。 該屬性值會(huì)對(duì)元素的寬度設(shè)置一個(gè)最高限制析砸。因此昔字，元素可以比指定值窄，但不能比其寬干厚。不允許指定負(fù)值李滴。 
  </div>

  
</body>
</html>

IE6與IE7的結(jié)果.png

IE8的結(jié)果.png

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

**本文版權(quán)歸本人即簡(jiǎn)書(shū)筆名：該賬戶(hù)已被查封 所有伺糠，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝斥季！ *