全系IE支援Bootstrap的解決方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

全系IE支援Bootstrap的解決方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:36 PM

最近做Web網站，之前一直覺得bootstrap非常好，這次使用了bootstrap3,在chrome,firefox,safari,opera，360瀏覽器（極速模式）、搜狗瀏覽器等瀏覽器下都沒有問題，而在IE8及IE11下發現樣式無法顯示，然後各種百度啊，最後在一個網友帖子的幫助下解決了問題，先將解決方法總結如下：

首先需要確保你的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瀏覽器運行最新的渲染模式，將添加以下標籤在頁面中

IE=edge表示強制使用IE最新內核，chrome=1表示如果安裝了針對IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可以讓用戶的瀏覽器外觀依然是IE的選單和介面，但用戶在瀏覽網頁時，實際上使用的是Chrome瀏覽器核心），那就用Chrome核心來渲染。關於此meta標籤的具體說明，可參考StackOverflow上的精彩回答，標籤高人的英文解釋可以參看
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
我加了一句

然後就可以了
內核控制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前後有空行

這裡有空格也不行，要去掉空格

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。具體是將寫成以前的這種
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版本
再引入
jquery.placeholder.js這個檔案的下載位址https://github.com/mathiasbynens/jquery-placeholder
然後再文件加入一下程式碼

<script type="text/javascript">
  $(function () {
    // Invoke the plugin
    $('input, textarea').placeholder();
  });
</script>

登入後複製

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。