解決IE11相容HTML5 設定

阿新 • • 發佈：2019-01-14

最近做一個Webhtml5網站，在chrome,firefox,safari,opera，360瀏覽器（極速模式）、搜狗瀏覽器等瀏覽器下均沒有問題，而在IE8及IE11下發現樣式無法顯示，然後各種百度啊，最後在雅朋網的一個網友帖子的幫助下解決了問題，現在將解決方法總結如下：

首先需要確保你的HTML頁面開始部分要有DOCTYPE宣告。DOCTYPE告訴瀏覽器使用什麼樣的HTML或XHTML規範來解析HTML文件，具體會影響：

對標記attributes 、properties的約束規則
對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於CSS程式碼甚至JavaScript指令碼的解析
DOCTYPE是非常關鍵的，目前的最佳實踐就是在HTML文件的首行鍵入：
<!DOCTYPE html>

1.針對瀏覽器的內容做標識（使用meta標籤調節瀏覽器的渲染方式）
為了讓IE瀏覽器執行最新的渲染模式，將新增以下標籤在頁面中

1	`<meta` `http-equiv="X-UA-Compatible"` `content="IE=edge,Chrome=1"` `/>`

IE=edge表示強制使用IE最新核心，chrome=1表示如果安裝了針對IE6/7/8等版本的瀏覽器外掛Google Chrome Frame（可以讓使用者的瀏覽器外觀依然是IE的選單和介面，但使用者在瀏覽網頁時，實際上使用的是Chrome瀏覽器核心），那麼就用Chrome核心來渲染。

2.IE8不支援HTML5的幾個屬性

IE8不完全支援box-sizing:border-box與min-width, max-width, min-height或max-height的一起使用.

3.JS與CSS的引入順序導致的問題
必須先引用css在引用js

1 2	`<link` `rel="stylesheet"` `type="text/css"` `href="programmer.css"` `media="screen"/>` `<script` `type="text/javascript"` `src="js/programmer.js"></script>`

4.DOCTYPE前後有空行
<!DOCTYPE html>
這裡有空格也不行，要去掉空格
<html>

以上IE11,chrome,firefox,safari,opera，360瀏覽器（極速模式）、搜狗瀏覽器測試通過.