1.如何調試 IE 瀏覽器
- IE7以上可以使用瀏覽器自帶的開發(fā)者工具严就，IE6可以使用加邊框的直觀方式進行調試；
- 使用模擬器模擬不同版本的IE瀏覽器蝴悉，如IEtester或者Test IE嫌蚤、Edge自帶模擬器等；
- 安裝虛擬機咆贬，在虛擬機內安裝多個系統(tǒng)搭配不同版本IE瀏覽器來進行調試；
2.什么是CSS hack帚呼？在 CSS 和 HTML里如何寫 hack掏缎？在 CSS 中 ie6、ie7的 hack 方式萝挤？
CSS hack概念：
CSS hack由于不同廠商的瀏覽器御毅，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本怜珍，如IE6和IE7，對CSS的解析認識不完全一樣凤粗，因此會導致生成的頁面效果不一樣酥泛，得不到我們所需要的頁面效果，這個時候我們就需要針對不同的瀏覽器去寫不同的CSS嫌拣，讓它能夠同時兼容不同的瀏覽器柔袁，能在不同的瀏覽器中也能得到我們想要的頁面效果。 簡單的說异逐，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器捶索。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果;
三種表現(xiàn)形式：
屬性前綴法(即類內部Hack)：
background:black; /* for all browsers /
_background:red; / for ie6 */
background:green; / for ie6~7 /
background:blue\9; / for ie6~10 */選擇器前綴法(即選擇器Hack)：
html .class{}/ for IE6 */
+html .class{}/ for IE7 */
:first-child+html .class{}/ for IE7 */-
IE條件注釋法(即HTML條件注釋Hack)：
只在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 中 ie6灰瞻、ie7的 hack 方式：
屬性以星號開頭腥例，如 *color: red;/* 該屬性只在ie6、ie7生效 */;
3.列舉幾種 瀏覽器兼容問題
-
border-radius:4px酝润；/* ie7以下版本不支持圓角 */
解決辦法：使用JQuery框架集來設置圓角或者圓角圖片進行覆蓋; -
min-height:200px;/*IE8以下不支持*/
解決辦法：添加"*height：200px燎竖；"屬性設置； -
display：inline-block;/*IE8以下不支持*/
解決辦法：添加"*display：inline要销；"屬性設置构回； -
opacity：0.6;/*IE8部分支持，IE8以下不支持*/
解決辦法：添加"filter:alpha(opacity=50); / IE */"屬性設置疏咐；
4.針對兼容纤掸、多瀏覽器覆蓋有什么看法？漸進增強和優(yōu)雅降級是什么意思浑塞？
看法：
- 分析需求借跪，對于上級或客戶需求兼容的低版本瀏覽器需全部兼容；
- 對于低版本只要大局顯示不影響缩举，可以不刻意追求美觀上樣式的一致垦梆；
- 分析瀏覽器占用率匹颤，一般低于一定占用率的瀏覽器可以選擇不兼容；
- 總體上托猩，把握時間成本印蓖、用戶群體、交互效果上進行權衡是否需要兼容對應的瀏覽器京腥；
漸進增強（progressive enhancement）：
- 一開始只構建站點的最少特性赦肃，然后不斷針對各瀏覽器追加功能;
- 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能公浪。漸進增強是值得所有開發(fā)者采用的做法他宛。漸進增強方案并不假定所有用戶都支持javascript，而總是提供一種候補方法欠气，確保用戶可以訪問（主要的）內容;
- 使用漸進增強時厅各，無需為了一個已成型的網站在舊式瀏覽器下正常工作而做逆向工程。首先预柒，只需要為所有的設備和瀏覽器準備好清晰且語義化的HTML以及完善的內容队塘，然后再以無侵入（unobtrusive）的方式向頁面增加無害于基礎瀏覽器的額外樣式和功能。當瀏覽器升級時宜鸯，它們會自動地呈現(xiàn)出來并發(fā)揮作用;
優(yōu)雅降級（graceful degradation）：
- 一開始就構建站點的完整功能憔古，然后針對瀏覽器測試和修復;
- 使用優(yōu)雅降級方案，Web站點在所有新式瀏覽器中都能正常工作淋袖，如果用戶使用的是老式瀏覽器鸿市，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題即碗，絕大多數(shù)Web設計師和開發(fā)者都通過專門的樣式表或針對不同版本的IE的hack實踐過優(yōu)雅降級了焰情；
- 使用優(yōu)雅降級技術時，你必須首先完整的實現(xiàn)了網站烙样，其中包括所有的功能和效果。然后再為那些無法支持所有功能的瀏覽器增加候選方案蕊肥，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效;
參考文檔：百度搜索
5.reset.css和normalize.css分別是做什么的谒获？為什么推薦使用nomalize.css?
**Reset.css: **
統(tǒng)一各個版本瀏覽器默認Html標簽樣式，直接重置所有原瀏覽器默認樣式壁却，再添加統(tǒng)一的標準默認樣式批狱；
normalize.css：
統(tǒng)一各個版本瀏覽器默認Html標簽樣式，只重置統(tǒng)一瀏覽器默認樣式中有差異的部分樣式展东；
推薦使用Normalize的好處：
- Normalize.css 保護了有價值的默認值赔硫；
- Normalize.css 修復了瀏覽器的bug
- Normalize.css 不會讓你的調試工具變的雜亂；
- Normalize.css 是模塊化的盐肃；
- Normalize.css 擁有詳細的文檔爪膊。
參考文檔：Jerry Zou
6.IE盒模型和標準盒模型有什么區(qū)別? 怎樣使 IE678使用標準盒模型?box-sizing:border-box有什么作用
W3C盒模型（標準盒模型）：
chrome权悟， ie9+, ie678(添加 doctype) 使用標準盒模型， 寬度= 內容寬度推盛，如下圖：
IE 盒模型：
ie678怪異模式（不添加 doctype）使用 ie 盒模型峦阁，寬度=邊框+padding+內容寬度，如下圖：
使 IE6耘成、7榔昔、8使用標準盒模型：
- 添加聲明
<!DOCTYPE html>
box-sizing:border-box作用:
- 為元素設定的寬度和高度決定了元素的邊框盒。即使盒子模型設定為IE盒模型瘪菌，設定寬高包含內邊距和邊框和內容寬度撒会；
7.操作
1. virtualbox 安裝 xp 虛擬機:
答：
-
安裝了XP及win7的virtualbox，如下圖：
2. 在 ie 6, 7, 8中展示 盒模型师妙、inline-block诵肛、max-width的區(qū)別？
答：
- 盒模型默穴，IE6曾掂、7、8聲明
<!Doctype html>壁顶，運行效果如下圖：
- 盒模型，IE6溜歪、7若专、8未聲明
<!Doctype html>，運行效果如下圖：
-
inline-block在IE8中兼容蝴猪，IE6调衰、7不兼容，運行效果如下圖：
-
max-width在IE8中兼容自阱，IE6嚎莉、7不兼容，運行效果如下圖：
聲明：本博客教程版權歸蘭文聰和饑人谷所有沛豌，轉載需說明來源趋箩！
