bootstrap3 相容IE8瀏覽器

来源:http://www.cnblogs.com/gamehiboy/archive/2016/01/21/5147390.html
-Advertisement-
Play Games

近期在使用bootstrap這個優秀的前端框架,這個框架非常強大,框架裡面有下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、麵包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等,bootstrap都已經預先定義好了,當我們製作網頁上,只需直接調用裡面的css即可 bootstrap是一個響...


  近期在使用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>

註:寫成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">是不可行的

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文件

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

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庫

<script src="js/bootstrap/jquery-1.12.0.min.js"></script>

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版本,再引入

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

然後在文件中加入一下代碼

<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里的不等於判斷符相同

2、bootstrap3相關css、js

   下載地址:http://pan.baidu.com/s/1getpDjt

     jquery.placeholder.js文件的下載地址https://github.com/mathiasbynens/jquery-placeholder

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言公司同事做了一個報表系統,需要做集群部署,本來是一件挺容易的事,但是部署過程中卻遇到啦種種蛋疼問題。問題1、我們的報表使用的是微軟的水晶報表,需要上傳報表的配置文件,然後水晶報表提供的控制項來讀取文件,不支持直接圖片伺服器提供的http:www.xxxx.com/a.jpg。但是他支持\\192....
  • css3動畫border旋轉時的應用。 效果圖上面代碼中要註意的地方:border-radius: 70px;為70px時div才能顯示為圓形,因為上下左右的border多出...
  • 修改radio、checkbox、select預設樣式,支持CSS3及js兩種方式,CSS3相容IE9以上,js方式支持IE8以上。select修改預設樣式僅支持IE10以上。
  • 一: JSON 語法是 JavaScript 對象表示語法的子集,其語法規則如下:數據在鍵值對中數據由逗號分隔花括弧保存對象:{}方括弧保存數組:[] 如:[{"name":"g","age":11},{"name":"c","age":22},{"name":"s","age":33}]二:js....
  • 最近公司的一款新產品APP要進行研發,老大的意思想用H5來做混合APP以達到高效敏捷開發的目的。我自然就開始進行各種技術選型的調研,這裡重點想說的是我最後挑選出的2款hybrid app開發技術方案:RN(react native),HBuilder。React Native是大名鼎鼎的Facebo...
  • 摘自前端農民工的博客讓我們先來看幾個網站:codingteambitioncloud9註意這幾個網站的相同點,那就是在瀏覽器中,做了原先“應當”在客戶端做的事情。它們的界面切換非常流暢,響應很迅速,跟傳統的網頁明顯不一樣,它們是什麼呢?這就是單頁Web應用。所謂單頁應用,指的是在一個頁面上集成多種功...
  • 在網頁的佈局過程中,經常會用到float屬性來實現頁面的左右佈局,但是有個問題就是父元素的高度並不能根據子元素的高度自適應。比如下麵這段代碼: title p left right 在瀏覽器...
  • “你為什麼要做一個程式員?”,“因為我有一顆改變世界的心!”,“說人話”,“因為我沒朋友。。。” -------------純屬娛樂===============================================...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...