2. 程式人生 > >bootstrap相容IE各版本的瀏覽器的問題

bootstrap相容IE各版本的瀏覽器的問題

阿新 • • 發佈：2019-02-10

Bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些元件表現出的樣式有些不同，但是功能是完整的。

bootstrap3支援的瀏覽器：

Chrome (Mac、Windows、iOS和Android)

Safari (只支援Mac和iOS版，Windows版已經基本死掉了)

Firefox (Mac、Windows)

Internet Explorer

Opera (Mac、Windows)

Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7

上的表現也是很不錯的，只是官方並不提供支援。

Internet Explorer 8 和 9的很多CSS3屬性和HTML5元素，例如圓角矩形和投影，不支援。

Internet Explorer 6 幾乎不支援，nav,  pagination 等在ie6上表現都特別差。

使用bootstrap2的bsie外掛 http://www.bootcss.com/p/bsie/ ，提取外掛裡的 bootstrap-ie6.css 和ie.css，在頁面的head裡bootstrap.css之下加入如下程式碼：

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">

<![endif]-->

<!--[if lte IE 7]>

<link rel="stylesheet" type="text/css" href="/css/ie.css">

<![endif]-->

禁用響應式佈局：

<link href="/css/non-responsive.css" rel="stylesheet" media="screen">

html裡的css程式碼：

<style type="text/css">

body {

    padding-top: 60px;

    padding-bottom: 40px;

}

/* 禁用響應式佈局：重新設定container的寬度。如果沒有後面三行的程式碼，在IE6環境下navbar-top會顯示為940px寬度 */

.container,

.navbar-static-top .container,

.navbar-fixed-top .container,

.navbar-fixed-bottom .container {

    width:1140px;

}

</style>

開啟 bootstrap-ie6.css檔案，將檔案裡的pager替換為pagination，用於支援bootstrap3的分頁元件。並在底部加入如下程式碼，程式碼作用請看註釋：

/*　柵欄系統，溢位的問題 */

.col-xs-1 {

  width: 5.7%;

}

.col-xs-2 {

  width: 13.96%;

}

.col-xs-3 {

  width: 22.2%;

}

.col-xs-4 {

  width: 30.5%;

}

.col-xs-5 {

  width: 38.8%;

}

.col-xs-6 {

  width: 47%;

}

.col-xs-7 {

  width: 55.2%;

}

.col-xs-8 {

  width: 63.5%;

}

.col-xs-9 {

  width: 72%;

}

.col-xs-10 {

  width: 80%;

}

.col-xs-11 {

  width: 88.3%;

}

.col-xs-12 {

  width: 100%;

}

/* 修復ie6下分頁元件css解析失敗的問題 */

.pagination .active a,

.pagination .active span {

  z-index: 2;

  color: #ffffff;

  cursor: default;

  background-color: #428bca;

  border-color: #428bca;

}

/* 修復ie6下input樣式被重寫的問題*/

.form-control{

  display: block;

  width: 100%;

  height: 34px;

  padding: 6px 12px;

  font-size: 14px;

  line-height: 1.428571429;

  color: #555555;

  vertical-align: middle;

  background-color: #ffffff;

  border: 1px solid #cccccc;

  border-radius: 4px;

}

在html頁body之上新增如下程式碼：

<!--[if lte IE 6]>

<script type="text/javascript" src="/js/bootstrap-ie.js"></script>

<![endif]-->

<script type="text/javascript">

(function ($) {

  $(document).ready(function() {

    if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6($(document));

  });

})(jQuery);

</script>

html整個頭部檔案如下：

<!DOCTYPE HTML>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

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

<!-- Bootstrap theme -->

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

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">

<![endif]-->

<!--[if lte IE 7]>

<link rel="stylesheet" type="text/css" href="/css/ie.css">

<![endif]-->

<link href="/css/non-responsive.css" rel="stylesheet" media="screen">

<link href="/css/showLoading.css" rel="stylesheet" media="screen">

<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="/js/bootstrap.min.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

  <script src="/js/html5shiv.js"></script>

  <script src="/js/respond.min.js"></script>

<![endif]-->

<style type="text/css">

body {

    padding-top: 60px;

    padding-bottom: 40px;

}

/* 禁用響應式佈局：重新設定container的寬度。如果沒有後面三行的程式碼，在IE6環境下navbar-top會顯示為940px寬度 */

.container,

.navbar-static-top .container,

.navbar-fixed-top .container,

.navbar-fixed-bottom .container {

    width:1140px;

}

</style>

首先需要確保你的HTML頁面開始部分要有DOCTYPE宣告。DOCTYPE告訴瀏覽器使用什麼樣的HTML或XHTML規範來解析HTML文件，具體會影響：
對標記attributes 、properties的約束規則
對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於CSS程式碼甚至JavaScript指令碼的解析
DOCTYPE是非常關鍵的，目前的最佳實踐就是在HTML文件的首行鍵入：
<!DOCTYPE html>


大神的帖子總結的bootstrap的查詢原因好幾條，首先，Bootstrap3 是移動裝置優先的原則開發的，所以原因可能如下：
1.沒有正確呼叫遠端地址
即只要是IE9以下，就呼叫兩個專門的js
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
但是我測試發現僅僅使用以上js檔案不可行，
2.呼叫方法不正確
不要用file://或@import形式引用respond.min.js或respond.js或css檔案


3.針對瀏覽器的內容做標識（使用meta標籤調節瀏覽器的渲染方式）
bootstrap不支援IE相容模式，為了讓IE瀏覽器執行最新的渲染模式，將新增以下標籤在頁面中
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
IE=edge表示強制使用IE最新核心，chrome=1表示如果安裝了針對IE6/7/8等版本的瀏覽器外掛Google Chrome Frame（可以讓使用者的瀏覽器外觀依然是IE的選單和介面，但使用者在瀏覽網頁時，實際上使用的是Chrome瀏覽器核心），那麼就用Chrome核心來渲染。關於此meta標籤的具體說明，可參見StackOverflow上的精彩回答，<meta>標籤高人的英文解釋可以參看
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
我有加了一句
<meta http-equiv="X-UA-Compatible" content="IE=9" />
然後就可以了
核心控制Meta標籤，因為目前國內的主流瀏覽器都是雙核心，故而新增meta標籤來告訴瀏覽器使用什麼核心來渲染頁面


4.IE8不支援container的幾個屬性
IE8不完全支援box-sizing:border-box與min-width, max-width, min-height或max-height的一起使用.所以，v3.0.1的bootstrap中對container的類，已經不再使用max-width了。


5.JS與CSS的引入順序導致的問題
必須先引用css在引用js
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="js/respond.min.js"></script>


6.DOCTYPE前後有空行
<!DOCTYPE html>
這裡有空格也不行，要去掉空格
<html>


7.也可以手動修改bootstrap.css
如果您使用的是bootstrap2.1.1，修改了navbar-inner{ filter:none}可解決問題，如果使用的是3.0+版的，沒有這段程式碼了，詳細介紹請看連線
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8


8.使用quirks mode（相容模式）
定義網頁時，向後相容舊的瀏覽器的模式就是quirks mode，與之對應的是“標準模式”就是 standard mode。具體是將<!DOCTYPE html>寫成以前的這種
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
這個我測試過，不可行


最後我在IE11下測試通過，但是在IE8下測試，有發現一個問題placeholder不被支援
下面是解決IE支援placeholder的方法
本文引用的jquery是1.11.1測試通過，先引用jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
也可以用其他的jquery版本
再引入<script type="text/javascript" src="js/jquery.placeholder.js"></script>
jquery.placeholder.js這個檔案的下載地址https://github.com/mathiasbynens/jquery-placeholder
然後再檔案中加入一下程式碼
<script type="text/javascript">
    $(function () {
        // Invoke the plugin
        $('input, textarea').placeholder();
    });
</script>
如果我這裡為涉及到的或者問題依然沒有解決的請移步http://hustlzp.com/post/2014/01/ie8-compatibility更加詳細


以上IE6,7,8,9,10,11,chrome,firefox,safari,opera，360瀏覽器（極速模式）、搜狗瀏覽器測試通過，只有IE5.5似乎不太可行，總之問題解決到此，萬惡的IE6-都叫它打醬油去吧


如果您不想使用jquery.placeholder.js,再不支援placeholder的瀏覽器下模擬placeholder實現
可參考此文講很詳細http://ju.outofmemory.cn/entry/1595

相關推薦

bootstrap相容IE各版本的瀏覽器的問題

Bootstrap的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些元件表現出的樣式有些不同，但是功能是完整的。 bootstrap3支援的瀏覽器： Chrome (Mac、Windows、iOS和Android) Safa

HTML和CSS中如何判斷ie各版本瀏覽器

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

從 ie10瀏覽器下Symbol 未定義的問題 探索vue專案如何相容ie低版本瀏覽器（ie9, ie10, ie 11 ）

問題：     vue專案在ie11下一片空白並報Symbol 未定義的錯 原因：     ie10瀏覽器解析不了es6的語法，需要我們使用babel（Babel是一種工具鏈，主要用於將ECMAScript 2015+程式碼轉換為當前和舊版瀏覽器或

JS如何判斷瀏覽器型別和詳細區分IE各版本瀏覽器

/* * 描述：判斷瀏覽器資訊 * 編寫：LittleQiang_w * 日期：2016.1.5 * 版本：V1.1 */ //判斷當前瀏覽型別 function BrowserType() { var userAgent =

IE低版本瀏覽器相容CSS3的屬性的工具htc

      前端開發工程師有一向我們必須要做的工作就是切圖製作頁面，最近有很多初級入門的同學發私信問我如何能夠讓低版本的IE瀏覽器相容CSS3的屬性，讓IE 6,7,8支援CSS3的部分屬性。今天要給

ajax相容ie低版本

//製作一個方法 function myajax(method,ajHtml,ajText,fn) { //建立一個新的物件用於儲存ajax let xhr=null; //判斷瀏覽器中有沒有XMLHttpRequest物件，如果沒有，就呼叫ie的物件賦值 if (w

ie 設定相容ie最新版本

在head標籤下加入meta標籤 <meta http-equiv="X-UA-Compatible" content="IE=edge" > <meta name="renderer" content="ie-stand">

整理IE低版本瀏覽器的bug

IE6雙倍距的問題 問題： 當浮動元素設定margin邊距時，邊距會加倍。 解決方法：是給浮動元素加上display：inline屬性 IE6圖片下方有空間隙 問題：圖片的下方預設的空隙 解決方案： 給img設定 display:block屬性 IE63畫素偏移BUG

各版本瀏覽器相容性的寫法

display：-moz-box     /*老版本語法：Firefor（buggy）*/ display:-ms-flexbox    /*混合版本語法IE*/ dispay:-webkit-flex   /*新版本語法：Chrome*/ display：flex    

js檢查ie低版本瀏覽器，並跳轉更新頁面

引言 現在我們用的一些主流前端框架，如vue, angular， react等對低版本的ie瀏覽器支援不好，一般指的是ie9以下的。如果低版本ie瀏覽器，開啟我們的網站頁面時， 我們希望給使用者溫馨的提示，去升級瀏覽器，而不是頁面混亂，各種報錯。 怎

Bootstrap 4/3 頁面基礎模板 與 相容舊版本瀏覽器

Bootstrap 3 與 4 差別很大，目錄檔案結構、所引入的內容也不同，這裡說說一下 Bootstrap 引入的檔案、網頁模板和相容性問題。本網站剛剛搭建好，正好發一下文章原來測試網站。 Bootstrap 4 目錄結構如下 bootstrap/ ├── css/ │ ├──

輕鬆搞定各版本IE相容問題,IE6,IE7,IE8,IE9,IE10,IE11

在網站開發中不免因為各種相容問題苦惱，針對相容問題，其實IE給出瞭解決方案,Google也給出瞭解決方案,百度也應用了這種方案去解決IE的相容問題。解決這種相容問題只需要一行程式碼就可以了，先來看下百

vue解決ie與低版本瀏覽器es6相容問題

使用vue-cli搭建vue專案打包後在ie上開啟靜態資源出現空白，但是在chrome上一切正常，經檢測發現打包後的js存在相容問題，ie等低版本瀏覽器對es6存在不支援情況，解決方法如下： 1. 安裝babel-polyfill npm i babel-polyfill

低版本IE內核瀏覽器兼容placeholder屬性解決辦法

hold 低版本 nbsp post spa bsp focus 瀏覽器兼容 lur 最簡便的一個方法，通過js實現。 <input type="text" name="username" id="username" value="姓名" onfocus="if(t

瀏覽器區域性列印:Window.print()--無需外掛，相容IE

Window.print()很強大好不好 ，外掛啥的咱們不稀罕 區域性列印通過樣式和呼叫方法隱藏，詳情見註釋 <html> <head> <meta charset="UTF-8"> <meta http-equiv='Con

Bootstrap 4/3 頁面基礎模板 與 兼容舊版本瀏覽器

響應 瘦身 html slim 不起作用 san bootstrap rouge neu Bootstrap 3 與 4 差別很大，目錄文件結構、所引入的內容也不同，這裏說說一下 Bootstrap 引入的文件、網頁模板和兼容性問題。本網站剛剛搭建好，正好發一下文章原來測試

判斷瀏覽器是否為IE和版本

瀏覽器版本 match ie9 true mat ie10 lse ie 8 avi var isIE8 = false; var isIE9 = false; var isIE10 = false; isIE8 = !!navigator.userAgent

js判斷瀏覽器核心 及ie的版本問題

首先說一下當前各大核心 Trident: IE 以Trident 作為核心引擎 // 俗稱 IE核心 Gecko: Firefox（火狐） // 俗稱Firefox核心 WebKit: Safari（蘋果）, Google Chrome（谷歌）,傲遊3 基於 Webkit 開

LoadRunner各版本對IE版本支援

LoadRunner8.0 最高支援ie6； LoadRunner8.1 最高支援ie6 LoadRunner9.0 最高支援ie7 LoadRunner9.5 最高支援ie8 LoadRunner11.0 最高支援ie9( win7 32位+LR11+IE10可用，但win7 64位+LR

圖片貼上上傳,預覽——相容ie（手動上傳）和谷歌瀏覽器（貼上或拖拽上傳）

1.優化上傳的css： .img-class { width: 525px; height: 290px; } .img-paste-class { width: 530px; height: 330px; } .a-file {