bootstrap3 相容IE8瀏覽器！ _javascript技巧
近期在使用bootstrap這個優秀的前端框架，這個框架非常強大，框架裡面有下拉式選單、按鈕組、按鈕下拉式選單、導覽、導覽列、麵包屑、分頁、排版、縮圖、警告對話框、進度條、媒體物件等,bootstrap都已經預先定義好了，當我們製作網頁上，只需直接呼叫裡面的css即可
bootstrap是一個響應式的佈局，你可以在寬螢幕電腦、普通電腦，平板電腦，手機上都得到非常優秀的佈局體驗。這種響應式的佈局正是透過CSS3的媒體查詢（Media Query）功能實現的，根據不同的解析度來匹配不同的樣式。 IE8瀏覽器並不支援這項優秀的Css3特性，Bootstrap在開發文件中寫瞭如何使用進行相容IE8,如果想相容IE6,IE7，可以搜尋bsie (bootstrap2)
Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那麼完美，部分組件不保證完全相容，還是要Hack的
1、使用html5陳述
<!DOCTYPE html> 这里不可以有空格 <html>
註：寫成是不可行的
2、加入meta標籤
確定顯示此網頁的IE版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=9" />
註:bootstrap不支援IE相容模式，為了讓IE瀏覽器運行最新的渲染模式，將添加以上標籤在頁面中，IE=edge表示強制使用IE最新內核，chrome=1表示如果安裝了針對IE6 /7/8等版本的瀏覽器外掛Google Chrome Frame
3、引入bootstrap檔
4、引入html5shiv.min.js和respond.min.js
讓不（完全）支援html5的瀏覽器「支援」html5標籤
<!--[if lt IE 9]> <script src="js/bootstrap/html5shiv.min.js"></script> <script src="js/bootstrap/respond.min.js"></script> <![endif]-->
5、新增1.X版本的Jquery庫
6、在IE8下測試，發現一個問題placeholder不被支持，以下是解決IE支持placeholder的方法，本文引用的jquery是1.12.0測試通過，先引用jquery
<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
也可以用其他的jquery版本，再引入
[code]
然後在文件中加入程式碼
<script type="text/javascript">
$(function () {
$('input, textarea').placeholder();
});
</script>
程式碼總結如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta name="author" content="zhy" /> <title>ie8</title> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"> <!--[if lte IE 9]> <script src=js/bootstrap/respond.min.js"></script> <script src=js/bootstrap/html5shiv.min.js"></script> <![endif]--> <script src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> </head> <body> </body> </html>
附註：
1、IE下判斷IE版本的語句
<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见 <!--[if IE 6]> <![endif]--> 只有IE6版本可见 <![if !IE]> <![endif]> 除了IE以外的版本 <!--[if lt IE 8]> <![endif]--> IE8以下的版本可见 <!--[if gte IE 7]> <![endif]-->
IE7及大於IE7的版本可見
lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。
lt ：就是Less than的簡寫，也就是小於的意思。
gte：就是Greater than or equal to的簡寫，也就是大於等於的意思。
gt ：就是Greater than的簡寫，也就是大於的意思。
! ： 就是不等於的意思，跟javascript裡的不等於判斷符相同
以上就是本文的全部內容，希望對大家的學習有所幫助。
熱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)
Win10最穩定的版本
Dec 25, 2023 pm 07:58 PM
很多用戶都會遇到在操作電腦的時候卡頓或者是藍屏，這個時候我們就需要找一個最為穩定的win10版本來進行操作，整體都是非常的好用的，可以讓你日常使用更為流暢。史上最穩定的win10版本1、win10正版原廠系統在這裡用戶可以使用簡單的操作，系統經過優化，具有很強的穩定性、安全性、兼容性，用戶可以按照步驟實現完美機器2、俄羅斯大神精簡版win10經過嚴格的精簡操作，刪除了許多不必要的功能和服務。精簡後，系統的CPU和記憶體佔用率更低，運作速度更快。 3.win10精簡版1909安裝多台不同硬體型號的電腦
Win11是否支援動態壁紙
Jan 01, 2024 pm 06:41 PM
眾所周知，win11一大特色就是自備安卓子系統，讓我們不需要用模擬器就可以安裝安卓軟體，但也存在win11安卓應用卡頓的問題，這該怎麼解決呢。 win11不相容動態桌布麼：答：win11能相容動態壁紙，如果用不了可能是軟體或系統版本落後。如果是剛更新，可能是被系統桌布覆蓋了。 1.如果是系統或軟體版本落後，那麼更新一下系統和動態桌布軟體即可。 2.如果是被系統桌布覆蓋了，可以嘗試開啟「設定」3、接著進入「個人化」下的「背景」設定。 4.然後將個人化設定背景改為「圖」5、修改完成後就能正常設定動態桌布
Switch2能相容於Switch卡帶嗎？
Jan 28, 2024 am 09:06 AM
Switch2是任天堂在2023年科隆遊戲展公佈的新機型，一些玩家擔心新出來的機型與之前版本的機型卡帶會不會存在兼容性問題，下面我們一起來看看吧。 switch2相容於switch卡帶嗎答：switch2不相容switch卡帶。 Switch2卡帶的介紹根據任天堂的生產鏈公司的消息稱，Switch2可能會使用64GB的卡帶。它由於性能更好，支撐更多的3A遊戲大作的原因，需要更大卡帶容量。因為很多的遊戲作品需要閹割和壓縮，才能塞進一張遊戲卡帶裡面。而且Switch的卡帶容易被複製遊戲內容，所以更換新卡帶
Linux系統是否相容於安卓軟體？
Mar 20, 2024 pm 02:27 PM
近年來，Android系統在行動裝置領域的普及率迅速增長，許多人開始關注在其他平台上是否也能運行安卓應用程式。 Linux作為常見的作業系統，受到不少人的青睞，那麼問題來了，Linux系統是否相容於安卓軟體呢？首先要明確的是，Linux系統與Android系統在核心上有一定的相似性，都是基於Linux核心的作業系統，因此從理論上來講，Linux系統是可以運行
解決d3dx9_43.dll不相容的方法
Feb 24, 2024 pm 10:06 PM
d3dx9_43.dll不相容怎麼解決近年來，電腦和遊戲的快速發展使得我們享受了更多的娛樂和便利。然而，有時在安裝或執行某些程式時，我們可能會遇到一些錯誤訊息，例如「d3dx9_43.dll不相容」。在這種情況下，我們該如何解決這個問題？首先，讓我們來了解一下這個錯誤訊息的含義。 d3dx9_43.dll是DirectX的一個系統文件，它是用於在操作系
Win11安裝及設定相容網路點的詳細指南
Jan 09, 2024 pm 02:50 PM
有不少網站用戶們在瀏覽的時候都會需要使用舊版本的瀏覽器才能夠使用，而新版本的需要添加兼容網點才可以進行使用，所以今天就給你們帶來了win11添加兼容網點詳細教程，來學習一下。 win11如何新增相容網點1、先開啟系統中的IE瀏覽器，點選瀏覽器右上角小齒輪進入「設定」。 2、然後在開啟的設定選單中，開啟「相容性視圖設定」。 3、在新增此網站下的編輯框中輸入要新增的網址，然後點選「新增」。 4.最後在下方就可以看到新增網址的網域名稱了，關閉視窗即可直接存取。
處理Eclipse版本不相容的方法
Jan 04, 2024 am 10:29 AM
遇到Eclipse版本不相容怎麼辦？ 【引言】Eclipse作為一款廣受歡迎的開發工具，不僅提供了強大的功能和豐富的插件，還兼具跨平台的特性。然而，在使用Eclipse過程中，有時可能會遇到版本不相容的問題，這可能導致程式無法正常運作或編譯錯誤。本文將介紹如何應對Eclipse版本不相容的情況，並提供一些程式碼範例來解決常見的兼容性問題。 【解決方案】更新Ecl
win10相容win7的設定方法介紹
Jan 03, 2024 pm 05:09 PM
很多朋友目前還在選擇win7系統而不是win10系統的原因就是害怕其相容性不好。其實，現在win10系統已經可以設定win7的相容模式了，只需要在屬性中就可以更改設置，下面就一起來看一下吧。 win10怎麼相容於win71、首先右鍵點擊我們需要在win7系統下運行的程序，然後打開“屬性”2、然後點擊上方的“相容性”，進入相容性選項卡。 3.在相容模式下勾選「以相容模式執行這個程式」4、然後就可以在下方的下拉式選單中選擇「windows7」5、完了之後只需要點擊「應用」或點選「確定」就可以了。
