一、如何調(diào)試 IE 瀏覽器劲赠？

IE調(diào)試的一般方法（css）：

• 使用高版本IE控制臺（對于IE7以上）

  
  
  IE11的開發(fā)者工具
• border: 1px solid red;（對于IE6以下沒有開發(fā)者工具，可以使用此方法估蹄≡矗看邊界來進行調(diào)試炭晒，這也是調(diào)試的重要手段网严。border不行就再加上background怜庸。）
• outline: 1px solid red;（IE6不支持割疾。）

• javascript: alert (document.get ...) （在IE里面執(zhí)行JS，在JS里面寫樣式進行調(diào)試麻昼。）

  
  
  調(diào)試頁面
  
  

  由于我的jQuery被墻了 ，所以沒有看到結(jié)果叉抡，也是蠻崩潰的井联。

• 利用遠程服務(wù)器轴捎，連接到有對應(yīng)版本的機器上進行調(diào)試侦副。

• 安裝多個虛擬機秦驯，每個虛擬機安裝不同版本的IE瀏覽器進行測試。

  
  
  安裝多個XP系統(tǒng)
• 利用一些可以對不同版本進行切換的工具固耘，比如IEtester、SuperPreview、Xenocode Browser Sandbox （可以實現(xiàn)真正的在線測試葫笼，但是有的要收費。）

二奥额、什么是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分類
  CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法活喊、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的煞烫。
• 屬性前綴法(即類內(nèi)部Hack)：比如滞详，IE6能識別下劃線和星號蒲犬，IE7能識別星號，但不能識別下劃線奋隶，IE6~IE10都認識"\9"唯欣，但firefox前述三個都不認識。
• 選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}嘀趟。
• IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(IE10+已經(jīng)不再支持條件注釋) 她按。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效陵刹。例如：
  只在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]-->

來個截圖

非IE瀏覽器生效

<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->

CSS hack現(xiàn)在用的越來越少，能不用盡量不用羡宙，可以用最少的hack去實現(xiàn)多瀏覽器兼容的頁面。所以不需要花很大精力去記僧凰，有這個概念，知道一些常見的就行隙弛。i知道星號是做ie67的hack，下劃線是ie6的hack就行总珠。瀏覽器越老，bug越多淫奔，但是越來越不關(guān)注這個了唆迁。關(guān)于CSS hack，可以直接在browserhacks查詢竞穷。
條件注釋可以參考資料史上最全的CSS hack方式一覽和條件注釋與CSS hack唐责。

三、列舉幾種瀏覽器兼容問題瘾带。

下面的測試結(jié)果都是在IE7和chrome下測試的鼠哥，其他版本的IE結(jié)果就不貼出來了。

• 透明度opacity

opacity: 0.4;

如果發(fā)現(xiàn)樣式效果沒有出來肴盏，先在Can I use上面查一下是否兼容恍飘，再搜一下解決方案乳怎。

透明度兼容

未解決之前

filter:alpha(opacity=50);
zoom: 1; /* IE7需要加上這句渊抄，來觸發(fā)hasLayout，不然沒有效果。*/

解決之后

• display: inline-block
  inline元素的display屬性設(shè)置為inline-block時兰迫，所有的瀏覽器都支持据德；
  block元素的display屬性設(shè)置為inline-block時水援，IE6/IE7瀏覽器是不支持的许帐。

  
  
  未解決之前
• 解決方案1：

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

解決之后

• 解決方案2：
  先使用display: inline-block;屬性觸發(fā)塊級元素，然后再定義display:inline;，讓塊元素呈遞為內(nèi)聯(lián)對象唧垦。需要注意的是双炕，兩個display 要先后放在兩個CSS聲明中才有效果荸恕，順序也不能反了肮柜。

div{
    display: inline-block;
}
div{
    *display: inline;
}

解決之后

• 塊級元素的外邊距margin無效
  塊級元素設(shè)置外邊距margin無效酥馍，行內(nèi)元素有效果（當然行內(nèi)元素只有左右的外邊距會有效果）辉词。
  
  塊級元素設(shè)置外邊距
  
  
  行內(nèi)元素設(shè)置外邊距
  
  在IE中捞镰，一個元素要么自己對自身的內(nèi)容進行計算大小和組織，要么依賴于父元素來計算尺寸抛人，所以子元素的margin失效。解決方法的思想主要是觸發(fā)haslayout饰躲。
• 解決方案1：
  給父元素加overflow: hidden;或者overflow: auto;泊愧。
  
  解決之后

• 解決方案2：

  
  
  解決之后
• 解決方案3：

height: 1%; /* 父元素上面 */

解決之后

• 解決方案4：

zoom: 1;  /* 父元素上面 */

解決之后

• margin加倍
  給ie6的浮動元素添加margin樣式的時候梢莽，實際的渲染效果是本身設(shè)置的外邊距的兩倍仑扑。解決方案是在這個元素里面加上display: inline;。
  這里需要注意的一點是授帕，清除浮動的時候一定要在父元素上加上zoom: 1;，否則沒有效果。
  
  ie6margin加倍
  
  不過按道理來說，這個margin加倍的情況應(yīng)該是左右方向上都有的，不知道為什么這里只有左邊方向上有。
  
  解決之后
  
  
  ie7margin不加倍
  
  
  ie8margin不加倍
• 文本框不能對齊
  當給input輸入框設(shè)置了高度之后，在IE9以下會出現(xiàn)文本和文本框不能對齊的現(xiàn)象眯勾。
  
  未解決之前
  
  解決方案：
  在input里面增加vertical-align: middle;。
  
  解決之后

四、針對兼容、多瀏覽器覆蓋有什么看法炎咖？漸進增強和優(yōu)雅降級是什么意思赃泡？

• 針對兼容問題寒波，首先做個統(tǒng)計，看看使用自己的產(chǎn)品的用戶升熊。如果使用IE的比例多（大于5%）影所，可能就要考慮兼容問題。
  針對自己的代碼僚碎，如果效果沒有渲染出來，首先看某個元素是否有問題阴幌。怎么看呢勺阐，在Can I use上面查一下兼容性（當然也可以自己一步步調(diào)試代碼，一個個刪元素矛双，找到問題所在）渊抽。如果不兼容，再搜一下解決方案,因為這些版本都比較老了议忽，遇到的問題一般都已經(jīng)遇到了懒闷，一般可以找到解決方案。
  還可以參考知乎：怎樣可以很好地保證網(wǎng)頁的瀏覽器兼容性栈幸。
• 漸進增強與優(yōu)雅降級
• 漸進增強
  開發(fā)時先去兼顧愤估，針對某一版本瀏覽器做開發(fā)。開發(fā)之后速址，再對高級瀏覽器增加一些特別的玩焰、額外的一些效果，使得看起來更好看一些芍锚，增強用戶體驗昔园。
• 優(yōu)雅降級
  開發(fā)過程中，不用考慮低版本并炮，等開發(fā)完成之后默刚，慢慢去作一個適應(yīng)。只要頁面正常逃魄，不亂荤西，就可以了，不用追求特別高的還原度嗅钻。
• 兩者的區(qū)別
  漸進增強是從一個比較基礎(chǔ)的皂冰，從能夠起作用的版本開始，然后再對不斷擴充养篓，來達到要求秃流。優(yōu)雅降級則是從比較復(fù)雜的現(xiàn)狀開始，把設(shè)計對象限定為當前主流的瀏覽器版本柳弄。

五舶胀、reset.css和normalize.css分別是做什么的概说？為什么推薦用nomalize.css?

• reset.css和normalize.css
  在html當中，一些標簽會有默認的樣式嚣伐，比如body糖赔、ul等會有外邊距。reset.css和normalize.css就是去掉默認樣式的轩端。當然它們也有區(qū)別放典，normalize.css是一種reset.css的替代方案。
  normalize.css的作用有：保護有用的瀏覽器的一些默認樣式基茵，而不是完全重置奋构；修復(fù)瀏覽器自身的一些bug；優(yōu)化css可用性拱层；解釋代碼弥臼。
• 推薦用nomalize.css的原因有以下幾點：
• reset.css比較暴力，它會對所有標簽的默認樣式重置為一樣的效果根灯；而normalize.css比較溫和径缅，注重通用的方案，重置掉該重置的樣式烙肺，保留有用的 user agent 樣式
• normalize.css對一些瀏覽器的 bug 進行修復(fù)纳猪；而reset.css是無法做到的。
• normalilze.css不會讓調(diào)試工具變得雜亂茬高；而reset.css在瀏覽器調(diào)試工具中有大段的繼承鏈兆旬，顯得比較雜亂，難看怎栽。

綜上所述丽猬，多種原因?qū)е峦扑]使用nomalize.css。
具體的還可以參考來熏瞄，讓我們談一談 Normalize.css以及知乎: Normalize.css 與傳統(tǒng)的 CSS Reset 有哪些區(qū)別脚祟。

六、IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用强饮？

• IE盒模型設(shè)置的width和height不僅僅是指content內(nèi)容的大小由桌，還包括border邊框和padding內(nèi)邊距；而標準盒模型設(shè)置的width和height就是content內(nèi)容的大小邮丰。
• 不添加doctype行您，也就是IE678怪異模式，使用的是IE盒模型剪廉；添加doctype娃循，chrome， ie9+, ie678斗蒋，使用的是標準盒模型捌斧。
• box-sizing是定義元素盒尺寸大小的方式笛质。它的屬性值可以為content-box、padding-box捞蚂、border-box妇押、inherit。
  box-sizing: border-box;計算方法為width/height=content+padding+border姓迅，表示指定的寬度和高度包含邊框敲霍、內(nèi)邊距和內(nèi)容區(qū)域。這就是上面提到的IE盒模型丁存。
  其他計算方式的說明以及DEMO可以參考我的另一篇博客盒模型色冀，這里就不再舉例了。

七柱嫌、操作

1. virtualbox 安裝 xp 虛擬機
   mac
   windows
   
   在virtualbox安裝xp虛擬機
   
   這里是在virtualbox里面安裝了三個xp系統(tǒng)，每個系統(tǒng)安裝一個IE瀏覽器屯换，分別為IE678编丘。
   一開始我安裝的是ghost版本，畫面一直卡在那里彤悔。下載了好幾個文件都是無法安裝嘉抓，折騰了蠻久，可能是ghost版本的很多光盤和iso在虛擬機下會出現(xiàn)一定的兼容性問題的原因晕窑。后來到msdn.itellyou.cn上找XP的官方系統(tǒng)安裝光盤鏡像iso文件下載鏈接抑片，下載到電腦，設(shè)置加載這個iso來進行系統(tǒng)安裝杨赤。結(jié)果成功了敞斋，超級興奮。
   在msdn.itellyou.cn上搜索“Windows XP”就可以找到疾牲，百度云管家離線下載植捎、迅雷下載、QQ旋風下載阳柔，都支持ed2k的下載鏈接焰枢。
   安裝教程
   在安裝過程中會要填一個產(chǎn)品密匙，填入“DG8FV-B9TKY-FRT9J-6CRCC-XPQ4G”就可以舌剂。
   這里的xp默認的是IE6济锄，然后再分別下載IE78到兩個xp系統(tǒng)中就可以對IE進行測試啦。
   弄好之后如果要實現(xiàn)虛擬機與主機共享粘貼板霍转、拖放荐绝，還需安裝增強工具包∏从牵可以參考如何開啟VirtualBox的共享粘貼板功能很泊。
2. 在 ie 6, 7, 8中展示 盒模型角虫、inline-block、max-width的區(qū)別委造。

• 盒模型

  • ie6

    
    
    添加doctype戳鹅，標準盒模型
    
    
    不添加doctype，IE盒模型

  • ie7

    
    
    添加doctype昏兆，標準盒模型
    
    
    不添加doctype枫虏，IE盒模型

  • ie8

    
    
    添加doctype，標準盒模型
    
    
    不添加doctype爬虱，IE盒模型
    
    

    這里一開始我沒有注意隶债，幸虧智遠發(fā)現(xiàn)了。在上面的截圖中跑筝，可以看到當IE為IE盒模型的時候死讹，它變成了長方形，高度變高了曲梗。因為在盒模型中赞警，撐起高度的就是line-height，所以這里的高度應(yīng)該就是字體（這里為空白字符）的line-height造成的虏两。經(jīng)過測試愧旦，發(fā)現(xiàn)IE678以及11都有這種情況，這應(yīng)該是IE的一個bug定罢。

    
    
    IE8截圖
    
    解決方案就是把字體設(shè)為0px就好啦笤虫。
    
    解決之后

  • inline-block

    • 塊級元素

    • ie6

      
      
      ie6不識別inline-block

    • ie7

      
      
      ie7不識別inline-block

    • ie8

      
      
      ie8識別inline-block

  • 行內(nèi)元素
    * ie6

    
    
    ie6中行內(nèi)元素支持inline-block
    
    

    可以看到在ie6中，行內(nèi)元素可以設(shè)置寬高祖凫。所以在ie6中琼蚯，行內(nèi)元素支持inline-block。

    • ie7

      
      
      ie7中行內(nèi)元素支持inline-block
      
      

      同理惠况，行內(nèi)元素在ie7中也支持inline-block凌停。

    • ie8
      
      ie8中行內(nèi)元素支持inline-block
      
      在ie8中，行內(nèi)元素也支持inline-block售滤。
      在Can I use中我們也可以看到罚拟，IE67是部分支持。
      
      inline-block的兼容性

  • max-width

  • ie6

    
    
    ie6不支持max-width

  • ie7

    
    
    ie7支持max-width

  • ie8

    
    
    ie8支持max-width

寫在后面的話：由于我自己以前沒有安裝過系統(tǒng)完箩，一開始這里的xp系統(tǒng)安裝花了蠻久的時間赐俗，打開系統(tǒng)的界面總是卡住，無法安裝弊知。差點就要放棄的時候阻逮，換了官方系統(tǒng)光盤鏡像結(jié)果就真的安裝好了≈韧看見藍天白云的那個桌面的時候心里還是很激動的叔扼，花了那么久的時間總算是沒有白費事哭。
從這件事上，就感悟到一點瓜富。沒有什么事會難到你無法完成的地步鳍咱，只要你肯堅持。所以希望自己加油与柑，以后做事也能做到堅持兩個字谤辜。