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

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

 

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

 

1. 安裝第三方測試軟件，如IETester。這種方法不推薦，因為目前根本沒有好用的多版本IE內核測試軟件。盡管IETester等軟件的功能很誘人，但是問題多多，滿是Bug，好像也不怎么更新。
2. 在Win8、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（Win8、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！