Web前端頁面的瀏覽器兼容性測試心得（二）搭建原汁原味的IE8測試環境

若是你作的頁面被老闆或PM要求兼容IE8，你就值得同情了。IE8不支持HTML5，在2017年的前端界，開發者不涉及HTML5標準簡直步履維艱。然而，有一個可怕的事實客觀存在，那就是IE8是Win7系統的默認瀏覽器！！！一想到國內Win7用戶的可觀數量，簡直男默女淚。對於普通用戶，360安全瀏覽器的知名度和使用量都大大高於Chrome，而360瀏覽器的兼容模式（Win7系統下），大部分就是IE8版本的內核。

 

怎麼辦？固然是硬着頭皮涼拌唄。有一個問題是，使用Win八、Win十、Mac、Linux系統的前端開發者，很難在本機上用IE8內核測試網頁。除了借用產品經理的老電腦（產品經理的電腦一般都是跑什麼東西都會出Bug的異空間），還有其餘辦法嗎？固然有。主要有如下幾類：

 

1. 安裝第三方測試軟件，如IETester。這種方法不推薦，由於目前根本沒有好用的多版本IE內核測試軟件。儘管IETester等軟件的功能很誘人，可是問題多多，盡是Bug，好像也不怎麼更新。
2. 在Win八、Win10下使用IE11的「仿真」功能。在IE11按下F12進入開發者工具，在「仿真」選項卡里能夠設置想要模擬的內核版本號。這種方法最爲簡單，但這並非原汁原味的Win7-IE8測試環境，有時候顯示效果可能和在真實環境下有所不一樣。並且，不適用於Mac和Linux用戶。
3. 使用虛擬機。這也是本文着重講述的方法，由於微軟曾推出過專用來在IE8內核下測試網頁的免費映像，這是真正原汁原味的測試環境。

 

2016年，微軟在開發者中心發佈了新版虛擬機，該虛擬機用來測試Windows10 Edge瀏覽器和IE8至IE11，有效期爲90天（超過90天則須要從新配置），相關用戶可免費下載。該虛擬機有Windows、Mac和Linux三大類版本，涉及IE8至Win10最新預覽版的Edge瀏覽器，可用於VirtualBox、Vagrant、HyperV以及UMware等主流虛擬機。

 

 

下載地址：https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

 

本文將介紹「IE8 on Win7」虛擬機在Hyper-V（Win八、Win10專業版自帶的虛擬機軟件）平臺上的安裝和使用。若是你是Mac、Linux用戶，或者想使用不是Hyper-V的其餘虛擬機軟件，如下內容就能夠跳過了。

 

我選用Hyper-V的理由和上一篇文章「Web前端頁面的瀏覽器兼容性測試心得（一）搭建測試用本地靜態服務器」類似，那就是Hyper-V也是Windows自帶的，不用折騰並且配置方便，何樂而不爲呢？如下操做步驟以Win10系統爲例：

 

1. 打開上文所給網頁，以下圖所示進行選擇，而後下載虛擬機：

   
   

   
   
   

2. 打開控制面板，進入「程序與功能」（如下步驟是開啓Hyper-V服務。若是你的電腦上已開啓Hyper-V，能夠直接跳到第6步）：
   
   
   
   
   

3. 點擊「啓用或關閉windows功能」：
   
   

   
   
   

4. 勾選「HyperV」選項並肯定：
   
   
   
   
   

5. Windows開始添加Hyper-V功能，這會持續幾分鐘。完成時若是提示「Windows須要重啓電腦才能完成安裝所請求的更改」，能夠選擇當即啓動電腦或不從新啓動電腦，在下次從新開啓電腦時就可正常開啓Hyper-V虛擬機功能。
   
   
   
   
   

6. 在開始菜單的「Windows管理工具」目錄下，找到並打開「Hyper-V管理器」（建議把該快捷方式放到桌面或固定在開始菜單，之後打開會更方便）。

   
   
   
   
   

7. 解壓下載到的「IE8.Win7.For.Windows.HyperV_2012.zip」壓縮包。該壓縮包建議保留，最好不要刪除，由於虛擬機的90天限期一到，就能夠從新解壓並更新虛擬機。

8. 在Hyper-V管理器右側點擊「新建」>「虛擬機」：

   
   
   
   
   

9. 在「新建虛擬機」嚮導中，前幾步均可以自行配置或進行默認配置，但在「鏈接虛擬硬盤」頁的三個選項裏，要選擇「使用現有虛擬硬盤」，並把下方的「位置」定位到壓縮包解壓目錄的「\Virtual Hard Disks\IE8 - Win7.vhd」文件。

   
   
   
   
   
   

10. 建立虛擬機後，若是你在以前嚮導裏的「配置網絡」頁沒有選項可選，那麼你就須要建立虛擬交換機了。點擊主界面右側的「虛擬交換機管理器」，在新窗口開始建立虛擬交換機。依次點擊「外部」、「建立虛擬交換機」，而後在「外部網絡」的下拉菜單中選擇你能夠訪問外網的設備並點擊「肯定」。

    
    
    
    
    
    
    
    
    

11. 建立虛擬交換機後，在主界面選擇第9步建立的虛擬機，在右下方點擊「設置」，彈出「設置」窗口後點擊左邊「網絡適配器」，選擇剛剛建立的虛擬交換機，點擊「肯定」便可完成設置。
    
    
    
    
    
    
    

12.  終於能夠開始啓動虛擬機了。在主界面選中建立的虛擬機，在右下方點擊「鏈接」，在新窗口點擊開機鍵。

    
    
    
    

    
    
    

13.  稍等片刻，虛擬機就會開機了。使用微軟給好的虛擬硬盤文件，就能夠順利初始化IE8-Win7測試環境，是否是很方便？

    
    
    
    
    

14. 在本地服務器已經創建的狀況下（見上篇文章「Web前端頁面的瀏覽器兼容性測試心得（一）搭建測試用本地靜態服務器」），打開IE8，輸入本機IP地址，你會發現虛擬機裏也能夠訪問本地服務器哦。這樣，在服務器目錄下丟入要測試的網頁，就能夠在原汁原味的Win7虛擬機上進行測試了。
    
    

IIS和Hyper-V，還有微軟提供的專用虛擬機，上篇文章和這篇文章裏所介紹的利器一結合，測試前端頁面不再是什麼困難事兒。後續我打算總結一些使HTML5兼容IE8的技術經驗，祝你寫的頁面可以完美地兼容IE8！