bootstrap相容IE8/ie9的問題解決

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支援的，然而，你要知道，很多CSS3屬性和HTML5元素 -- 例如，圓角矩形和投影 -- 是肯定不被支援的。另外，Internet Explorer 8 需要Respond.js配合才能實現對媒體查詢（media query）的支援。

Internet Explorer 8 和 Respond.js

在開發環境和生產（線上）環境需要支援 Internet Explorer 8 時，請務必注意下面給出的警告。
Respond.js 和 跨域（cross-domain） CSS 的問題

 

如果 Respond.js 和 CSS 檔案被放在不同的網域名稱或子網域名稱下面（例如，使用CDN）時需要一些額外的設定。請參考 Respond.js 文檔 擷取詳細資料。
Respond.js 和 file://

由於瀏覽器的安全規則問題，Respond.js 不能通過 file:// 協議（開啟本地HTML檔案所用的協議）訪問的頁面上發揮正常的功能。如果需要測試IE8下面的響應式特性，必須用http伺服器（例如apache、nginx）託管HTML頁面才可以。請參考 Respond.js 文檔 擷取更多資訊。
Respond.js 和@import

Respond.js 不支援通過 @import 引入的CSS檔案。例如，Drupal 一般被配置為通過 @import 引入CSS檔案，Respond.js對其將無法起到作用。 請參考Respond.js 文檔擷取更多資訊。
Internet Explorer 8 與 box-sizing

IE8不能完全支援box-sizing: border-box;與min-width、max-width、min-height或max-height一同使用。由於此原因，從Bootstrap v3.0.1版本開始，我們不再為.container使用max-width。
IE相容模式

Bootstrap不支援IE的相容模式。為了讓IE瀏覽器運行最新的渲染模式，建議將此 <meta> 標籤加入到你的頁面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

此標籤被加入到所有文檔頁面和案例頁面中，以確保在每個被支援的IE瀏覽器中保持最好的頁面展現效果。

1.瀏覽器和裝置的支援情況

Bootstrap 的目標是在最新的案頭和行動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些組件表現出的樣式有些不同，但是功能是完整的。只要在遇到的時候針對性的做出調整，基本組件是沒有問題的正常使用的。關鍵的問題在布局上。因為使用的響應式是html5+css3,IE9以下的幾乎不支援。如圖1所示WEB設計的圖，可能是左邊的，但手機ipad 等手持功能，尺寸不一樣，網頁要適應尺寸，根據不能同尺寸重新排列這就是html5響應式設計。

 

 

2.Internet Explorer 8 和 9

Internet Explorer 9 和8的相容模式是被支援的，純Internet Explorer 8 不被支援，然而，很多 CSS3 屬性和 HTML5 元素 -- 例如，圓角矩形和投影 -- 是肯定不被支援的。另外， Internet Explorer 8 需要 Respond.js 配合才能實現對媒體查詢（media query）的支援。

 

3.Internet Explorer 8 與 box-sizing 屬性

當 box-sizing: border-box; 與 min-width、max-width、min-height 或 max-height 一同使用時，IE8 不能完全支援 box-sizing 屬相。由於此原因，從 Bootstrap v3.0.1 版本開始，不再為 .container 賦予 max-width 屬性。

box-sizing定義和用法

box-sizing 屬性允許您以特定的方式定義匹配某個地區的特定元素。

例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

 

4.bootstrap3布局架構

Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了便於使用的預定義類，還有強大的mixin（Mixin編程是一種開發模式，是一種將多個類中的功能單元的進行組合的利用的方式，這聽起來就像是有類的繼承機制就可以實現，然而這與傳統的類繼承有所不同。通常mixin並不作為任何類的基類，也不關心與什麼類一起使用，而是在運行時動態同其他零散的類一起組合使用。） 用於產生更成更具語義的布局。 柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面配置，你的內容就可以放入這些建立好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：

1. “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
2. 通過“行（row）”在水平方向建立一組“列（column）”。
3. 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子項目。
4. 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來建立語義化的布局。
5. 通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
6. 如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。

這裡略過視口查詢 IE8 不支援響應式無需考慮響應式。重寫了柵格化流式布局的模組，當在重寫的時候有針對性的IE7 和IE8 做了hack 處理，但是最後出來IE7 還是不支援。還需要在hack處理。下面就舉幾個關鍵的地方說明一下：

Container 架構提供的屬性在每個不同視口下面取值不同，從固定值到 百分比。

.container {width: 1170px;}  重寫後使用正常pc 視口下將布局設定成固定框度的

Bootstrap 3提供的row 屬性

.row {margin-left: -9px; margin-right: -9px; }

.row:before,.row:after {  content: " ";  display: table; }

.row:after {  clear: both; }

.row:before,.row:after {  content: " ";  display: table; }

.row:after {  clear: both; }

 

重寫後row 屬性

.row { margin-left: -15px; margin-right: -15px; width: 100%; *zoom: 1; }

.row:before,.row:after {display: table;line-height: 0;content: "";}

.row:after { clear: both;}

 

關於row 屬性這裡做了請浮動的處理，同時也兼顧了IE7 的hack 利用了偽類的方式。

把12柵格全部重寫成浮動，全面row 清楚浮動，在ie 8 環境中就會自然撐起成固定寬度流式布局