【轉】讓Bootstrap 3兼容IE8瀏覽器

時間 2019-11-05

原文原文鏈接

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.htmlcss

最近在研究Bootstrap（官方，Github）這個優秀的前端框架，Bootstrap最開始是Twitter團隊內部的一個前端框架，所謂前端框架就是一個CSS/HTML框架，框架裏面有下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、麪包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。Bootstrap他們預先定義好，等要進行正式製做網頁的時候，咱們能夠直接用裏面的class就能夠了。html

今天很少介紹Bootstrap的功能，之後有機會能夠重點介紹一下，確實十分優秀。響應式佈局，定製性強，組件豐富，與Jquery完美契合。前端

進入主題，說說Bootstrap 3的兼容IE8問題。html5

Bootstrap是一個響應式的佈局，你能夠在寬屏電腦、普通電腦，平板電腦，手機上都獲得很是優秀的佈局體驗。這種響應式的佈局正是經過CSS3的媒體查詢（Media Query）功能實現的，根據不一樣的分辨率來匹配不一樣的樣式。IE8瀏覽器並不支持這一優秀的Css3特性，Bootstrap在開發文檔中寫了如何使用進行兼容IE8。可是筆者屢次嘗試沒有成功，IE8的佈局是亂的。直到今天忍無可忍，決定再嘗試一下，最終得到成功。有些細節沒有注意到，致使IE8無法響應式佈局。jquery

下面講解下如何讓Bootstrap 3兼容IE8瀏覽器，至於有人會問我如何兼容IE6 IE7，請繞道搜索bsie (bootstrap2)。git

Bootstrap在IE8中確定不如Chrome、Firefox、IE11那麼完美，部分組件不保證徹底兼容，仍是要Hack的。這裏不談。github

一、使用html5文檔聲明

使用zencoding的用戶輸入 html:5 再按Tab鍵便可。ajax

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

二、加入meta標籤

前者定義媒體查詢，後者肯定顯示此網頁的IE版本。bootstrap

1 2	<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

三、引入bootstrap文件

這步十分重要，這裏要看你是引用其餘網站（CDN）的bootstrap文件仍是把Bootstrap文件放本地。
這裏我放在本地，由於以後的部署比較簡單。瀏覽器

1	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

四、引入respond.js 和 html5.js

respond.js（Github）是用於媒體查詢的，項目說明描述：要和須要進行媒體查詢的文件放在同一域中。否則CDN部署的須要更改一些選項，以後再說。

html5shiv : html5.js（Google Code）(Github)是讓不（徹底）支持html5的瀏覽器「支持」html5標籤。

<!--[if lte IE 9]>

<![endif]-->

4.1 CSS文件在CDN上（或子域名）的Respond.js部署

詳情請見：https://github.com/scottjehl/Respond#cdnx-domain-setup

Github上說，這個js是經過ajax複製一份你的css文件。因此須要一個代理頁面去請求文件。

須要上傳一些文件，步驟比較複雜，並且通常公共CDN基本沒人有這種操做權限。

以後再添加代碼。