Bootstrap 3兼容IE8瀏覽器（轉）

時間 2019-12-14

原文原文鏈接

轉自：http://www.mamicode.com/info-detail-503562.htmlcss

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

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

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

一、使用html5文檔聲明

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

二、加入meta標籤

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

三、引入bootstrap文件

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

四、引入respond.js 和 html5.js

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

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

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

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

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

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

以後再添加代碼。

五、添加1.X版本的Jquery庫

Jquery 2.0以上就再也不支持IE 6/7/8 這三大虐心神器了。因此要想使用Bootstrap3中的一些插件效果，好比modal 彈出層對話框這類控件。咱們就須要添加 2.0如下的，這裏我用1.10.2的Jquery庫。

六、總結

本人非前端工程師，只是愛好者一枚，若有錯誤還請批評指教。你們相互學習~

本人也正是作了個Bootstrap3的小項目（姓名代碼查詢），正是這個項目讓我總結以上經驗出來。

主要仍是在於讓respond.js起效果，關鍵就是讓bootstrap的文件和respond.js同域，不一樣域須要用CDN上的html作ajax。

懶人代碼總結以下：

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Jophy" />//可刪
<title>ie8</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/style.css">//根據須要引用
<!--[if lte IE 9]>
<script src="bootstrap/js/respond.min.js"></script>
<script src="bootstrap/js/html5.js"></script>//根據須要引用（本此項目未引用）
<![endif]-->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>//根據須要引用
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>//根據須要引用
<body>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。