讓Bootstrap 3兼容IE8瀏覽器

時間 2019-11-13

標籤 bootstrap 兼容 ie8 瀏覽器欄目 Bootstarp 简体版

原文原文鏈接

讓Bootstrap 3兼容IE8瀏覽器css

看到這篇文章有愈來愈多的人看，我決定給你們節省時間，廢話少說。有幾個點你們要注意。html

一、本地調試須要Web Server（如IIS、Apache，Nginx），單純地本地打開文件不能看到兼容效果。前端

二、若是你發現已經引用了respond.js和Bootstrap，仍無效果，請查看你的Bootstrap是否使用了CDN文件。（詳情看第4點）html5

三、本文主要針對Bootstrap3版本，若是你是Bootstrap2 ，請搜索 BSIE ，還能夠兼容IE6瀏覽器.jquery

四、Bootstrap3 須要Html5文檔聲明git

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

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

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

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

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

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

一、使用html5文檔聲明

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
 
</body>
</html>

二、加入meta標籤

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

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

三、引入bootstrap文件

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

<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]>
<script src="bootstrap/js/respond.min.js"></script>
<script src="bootstrap/js/html5.js"></script>
<![endif]-->

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

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

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

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

以後再添加代碼。

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
 
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
 
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

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

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

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

六、總結

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

本人也正是作了個Bootstrap3的小項目（姓名代碼查詢，因爲使用CDN，E8有短暫屏閃，且屏閃沒法避免），正是這個項目讓我總結以上經驗出來。

主要仍是在於讓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>

相關標籤/搜索

每日一句

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