這篇文章主要介紹了bootstrap不支持ie的解決方法,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
bootstrap不支持ie的解決辦法:首先確保HTML頁(yè)面開(kāi)始部分要有DOCTYPE聲明;然后正確調(diào)用遠(yuǎn)程地址,并針對(duì)瀏覽器的內(nèi)容做標(biāo)識(shí);最后檢查并修改相應(yīng)的js或css文件即可。
bootstrap對(duì)IE9以下的瀏覽器存在一定的兼容問(wèn)題,要解決這個(gè)兼容問(wèn)題,必須引入相關(guān)的js文件進(jìn)行相應(yīng)的處理才能解決。下面本篇文章給大家介紹一下bootstrap不支持ie的解決方法,希望對(duì)大家有所幫助。
首先需要確保你的HTML頁(yè)面開(kāi)始部分要有DOCTYPE聲明。DOCTYPE告訴瀏覽器使用什么樣的HTML或XHTML規(guī)范來(lái)解析HTML文檔,具體會(huì)影響:
對(duì)標(biāo)記attributes 、properties的約束規(guī)則
對(duì)瀏覽器的渲染模式產(chǎn)生影響,不同的渲染模式會(huì)影響到瀏覽器對(duì)于CSS代碼甚至JavaScript腳本的解析
DOCTYPE是非常關(guān)鍵的,目前的很好實(shí)踐就是在HTML文檔的首行鍵入:
<!DOCTYPE html>
大神的帖子總結(jié)的bootstrap的查找原因好幾條,首先,Bootstrap3 是移動(dòng)設(shè)備優(yōu)先的原則開(kāi)發(fā)的,所以原因可能如下:
1、沒(méi)有正確調(diào)用遠(yuǎn)程地址
即只要是IE9以下,就調(diào)用兩個(gè)專門(mén)的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]-->
但是我測(cè)試發(fā)現(xiàn)僅僅使用以上js文件不可行,
推薦:《bootstrap教程》
2、調(diào)用方法不正確
不要用file://或@import形式引用respond.min.js或respond.js或css文件
3、針對(duì)瀏覽器的內(nèi)容做標(biāo)識(shí)(使用meta標(biāo)簽調(diào)節(jié)瀏覽器的渲染方式)
bootstrap不支持IE兼容模式,為了讓IE瀏覽器運(yùn)行新的渲染模式,將添加以下標(biāo)簽在頁(yè)面中
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
IE=edge表示強(qiáng)制使用IE新內(nèi)核,chrome=1表示如果安裝了針對(duì)IE6/7/8等版本的瀏覽器插件Google Chrome Frame(可以讓用戶的瀏覽器外觀依然是IE的菜單和界面,但用戶在瀏覽網(wǎng)頁(yè)時(shí),實(shí)際上使用的是Chrome瀏覽器內(nèi)核),那么就用Chrome內(nèi)核來(lái)渲染。關(guān)于此meta標(biāo)簽的具體說(shuō)明,可參見(jiàn)StackOverflow上的精彩回答,<meta>標(biāo)簽高人的英文解釋可以參看
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" />
然后就可以了
內(nèi)核控制Meta標(biāo)簽,因?yàn)槟壳皣?guó)內(nèi)的主流瀏覽器都是雙內(nèi)核,故而添加meta標(biāo)簽來(lái)告訴瀏覽器使用什么內(nèi)核來(lái)渲染頁(yè)面
4、IE8不支持container的幾個(gè)屬性
IE8不完全支持box-sizing:border-box與min-width, max-width, min-height或max-height的一起使用.所以,v3.0.1的bootstrap中對(duì)container的類,已經(jīng)不再使用max-width了。
5、JS與CSS的引入順序?qū)е碌膯?wèn)題
必須先引用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、也可以手動(dòng)修改bootstrap.css
如果您使用的是bootstrap2.1.1,修改了navbar-inner{ filter:none}可解決問(wèn)題,如果使用的是3.0+版的,沒(méi)有這段代碼了,詳細(xì)介紹請(qǐng)看連接
/tupian/20230522/prep8、使用quirks mode(兼容模式)定義網(wǎng)頁(yè)時(shí),向后兼容舊的瀏覽器的模式就是quirks mode,與之對(duì)應(yīng)的是“標(biāo)準(zhǔn)模式”就是 standard mode。具體是將<!DOCTYPE html>寫(xiě)成以前的這種
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/tupian/20230522/ppre><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這個(gè)文件的下載地址https://github.com/mathiasbynens/jquery-placeholder
然后再文件中加入一下代碼
<script type="text/javascript"> $(function () { // Invoke the plugin $('input, textarea').placeholder(); }); </script>感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“bootstrap不支持ie的解決方法”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
當(dāng)前標(biāo)題:bootstrap不支持ie的解決方法-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL:http://chinadenli.net/article8/deidop.html成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容