bootstrap支援ie8 讓IE6 IE7 IE8 IE9 IE10 IE11支援Bootstrap的解決方法
標籤：
Bootstrap是一個響應式的佈局，你可以在寬屏電腦、普通電腦，平板電腦，手機上都得到非常優秀的佈局體驗。這種響應式的佈局正是通過CSS3的媒體查詢（Media Query）功能實現的，根據不同的解析度來匹配不同的樣式。IE8瀏覽器並不支援這一優秀的Css3特性，Bootstrap在開發文件中寫了如何使用進行相容IE8。但是筆者多次嘗試沒有成功，IE8的佈局是亂的。直到今天忍無可忍，決定再嘗試一下，最終獲得成功。有些細節沒有注意到，導致IE8沒法響應式佈局。
下面講解下如何讓Bootstrap 3相容IE8瀏覽器，至於有人會問我如何相容IE6 IE7，請繞道搜尋bsie (bootstrap2)。
Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那麼完美，部分元件不保證完全相容，還是要Hack的。這裡不談。
1、使用html5文件宣告
使用zencoding的使用者 輸入 html:5 再按Tab鍵即可。
XHTML<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、加入meta標籤
前者定義媒體查詢，後者確定顯示此網頁的IE版本。
XHTML<meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
3、引入bootstrap檔案
XHTML這步十分重要，這裡要看你是引用其他網站（CDN）的bootstrap檔案還是把Bootstrap檔案放本地。
這裡我放在本地，因為之後的部署比較簡單。
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
4、引入respond.js 和 html5.js
respond.js（Github）是用於媒體查詢的，專案說明描述：要和需要進行媒體查詢的檔案放在同一域中。不然CDN部署的需要更改一些選項，之後再說。
html5shiv : html5.js（Google Code）(Github)是讓不（完全）支援html5的瀏覽器“支援”html5標籤。
XHTML<!--[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部署
XHTML詳情請見：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>
5、新增1.X版本的Jquery庫
Jquery 2.0以上就不再支援IE 6/7/8 這三大虐心神器了。所以要想使用Bootstrap3中的一些外掛效果，比如modal 彈出層對話方塊這類控制元件。我們就需要新增 2.0以下的，這裡我用1.10.2的Jquery庫。
XHTML<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
6、總結
本人非前端工程師，只是愛好者一枚，如有錯誤還請批評指教。大家相互學習~
本人也正是做了個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>XHTML
相關推薦
bootstrap支援ie8 讓IE6 IE7 IE8 IE9 IE10 IE11支援Bootstrap的解決方法
標籤： Bootstrap是一個響應式的佈局，你可以在寬屏電腦、普通電腦，平板電腦，手機上都得到非常優秀的佈局體驗。這種響應式的佈局正是通過CSS3的媒體查詢（Media Query）功能實現的，根據不同的解析度來匹配不同的樣式。IE8瀏覽器並不支援這一優秀的Css3特性，Bootstrap在開發文件中寫
讓IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解決方法
插件 tar ie7 http aik html href ots str Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化的完善，形成一套自己獨有的網
讓bootstrap相容ie6 ie7 ie8 ie9 ie10 ie11的解決方法
前兩天遇到要bootstrap相容ie各個版本的問題，但是各種百度，各種部落格，最後算是解決了，但是迷迷糊糊的，現在來總結一下，如有雷同純屬總結。 首先看看程式碼的模樣： <html>
div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法（非原創）
需要 通過 是我 point 一定的 oba 對象 important not div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法 1.DOCTYPE 影響 CSS 處理 2.FF: div 設置 margi
CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
網頁 可讀性 處理 widgets 命令 固定 允許 track 屏幕 300px!important;width /**/:340px;margin:0 10px 0 10px} ，關於這個/**/是什麽我也不太明白，只知道IE5和firefox都支持但IE6不支
div+css 完全相容ie6 ie7 IE8 IE9 和firefox方法
簡單方法： IE6,IE7,IE8,FF的相容方法(2) 瀏覽器相容程式碼： 瀏覽器 符號 IE6 IE7 IE8 FF * !important _ \9 *html *+html 說明：代表能識別； 代表不識別 1、 案例一（常用） 如果各個瀏覽器的高度都不相同，程式碼如
CSS相容IE6/IE7/IE8/IE9/IE10的通用方法
一、CSS HACK 以下兩種方法幾乎能解決現今所有HACK. 1, !important 隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該宣告位置需要提前.) 以下為引用的內容： <style> #wrapper { width
CSS完美相容IE6/IE7/IE8/IE9/IE10的通用方法
一、CSS HACK 以下兩種方法幾乎能解決現今所有HACK. 1, !important 隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該宣告位置需要提前.) 以下為引用的內容： <style> #wrapper {
輕鬆搞定各版本IE相容問題,IE6,IE7,IE8,IE9,IE10,IE11
在網站開發中不免因為各種相容問題苦惱，針對相容問題，其實IE給出瞭解決方案,Google也給出瞭解決方案,百度也應用了這種方案去解決IE的相容問題。解決這種相容問題只需要一行程式碼就可以了，先來看下百
一行程式碼解決各種IE相容問題,IE6,IE7,IE8,IE9,IE10
在網站開發中不免因為各種相容問題苦惱，針對相容問題，其實IE給出瞭解決方案Google也給出瞭解決方案百度也應用了這種方案去解決IE的相容問題 百度原始碼如下<!Doctype html> <html xmlns=http://www.w3.org/1999
一行程式碼輕鬆搞定各種IE相容問題,IE6,IE7,IE8,IE9,IE10
/* IE7/IE8.js - copyright 2004-2008, Dean Edwards */ 2 (function(){IE7={toString:function(){return"IE7 version 2.0 (beta)"}};var u=K();var v=/ie7_debug/.te
IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值，重現程式碼如下 複製程式碼程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/>
[轉]CSS中設定div最小高度(支援IE6, IE7, IE8, FF等瀏覽器)
在CSS中設定div(及其他塊元素)的最小高度時，可以用min-height，但是此屬性並不支援IE6及IE6以下的IE版本，這裡有一個比較好的辦法來解決設定div最小高度時在各個瀏覽器之間的相容性問題，適用於IE5.5、IE6、IE7、IE8、IE9、Firefox、G
解決header,footer等HTML5標簽在IE(IE6/IE7/IE8)無效的方法
web one name 發揮 lba osc fig ocl warn HTML5的語義化標簽以及屬性，可以讓開發者非常方便地實現清晰的web頁面布局，加上CSS3的效果渲染，快速建立豐富靈活的web頁面顯得非常簡單。 HTML5的新標簽元素有： <header&
瀏覽器的差距、ie6 ie7 ie8、符號、html css、BFC、
1、瀏覽器的差距 瀏覽器預設的字型是16px，谷歌的最小字型是12px，其他是10px 2、ie6、ie7、ie8、 hack：就是針對不同的瀏覽器去不同的html，css樣式，從而讓各個瀏覽器能達到一致的渲染效果 html的hack：寫在html的標籤中 css的hack：寫在cs
(轉)如何在ie6/ie7/ie8中實現iframe背景透明
最近做了一個專案，涉及到ie8iframe背景透明的問題，做了老半天，才把它搞定的，現在把我的經歷貼出來和大家分享： 眾所周知的根據W3C CSS 2.1 規範規定，''''background-color'''' 特性的預設值為 ''''transparent''''
相容IE6,IE7,IE8和Firefox的圖片上傳預覽效果
所謂圖片上傳預覽，就是在使用檔案選擇框選擇了檔案之後就可以在頁面上看見圖片的效果，關於這個效果我一直認為是無法做到的，沒想到前不久被zhuozi搞定了。 網上流傳的一些關於圖片上傳預覽的程式碼都是差不多的，IE6下使用檔案選擇物件的value屬性取出將要上傳的本地檔案路徑，然
完美解決IE(IE6/IE7/IE8)不相容HTML5標籤的方法
方式一：Coding JavaScript <!--[if lt IE9]> <script> (function() { if (! /*@[email protected]*/ 0) retu
固定層不隨滾動條滾動而滾動(純CSS,相容IE6,IE7,IE8,Firefox,Safari)
使用CSS來固定層，此層不隨滾動條滾動而滾動，固定層分三個位置： 頁面頂端： 頁面中央： 頁面底層： StaticContent.css檔案： /*******呼叫<div id="fiexd-headerIE6"></div>****
【CSS筆記之五】IE6/IE7/IE8下float:right的異常及其解決方法
示例分析程式碼： <div id="channel_tit" class="round_top"> <span class="rtl rtl1"></span> <h2>安卓首頁><a href=