解決360等等瀏覽器兼容模式解析不兼容代碼

? ?之前寫的代碼不是很規范 , 在今天測試下發現360瀏覽器等等的瀏覽器使用兼容模式會有很多不兼容 , 網上了解過一下 , 說是很多瀏覽器的兼容模式可能就是為了兼容IE7之前的網站代碼 , 而非我們字面理解的'兼容'二字 ?... ?
OK!跑題了 ...?
我的解決方案是在頁面head加<meta http-equiv="X-UA-Compatible" content="IE=11"> ?
告訴瀏覽器最少使用IE11的內核去解析 ?能解決IE7內核下的很多問題

再來學習一番：

?? X-UA-Compatible是針對IE8新加的一個設置，對于IE8之外的瀏覽器是不識別的，這個區別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對于多數網站來說，它是首選的兼容性模式。
??????? 為了避免制作出的頁面在IE8下面出現錯誤，建議直接將IE8使用IE7進行渲染。也就是直接在頁面的header的meta標簽中加入如下代碼：

Html代碼??收藏代碼
  1. <meta?http-equiv="X-UA-Compatible"?content="IE=7"?/>??

??????? 這樣我們才能使得頁面在IE8里面表現正常！
??????? 瀏覽器市場份額的激烈競爭，給網頁設計開發人員帶來了兼容性設計的麻煩。僅IE瀏覽器就有好幾個主流版本，IE6、IE7、IE8 等等。當然使用諸如 IETester，多版本 IE 共存解決方案之類的第三方集成工具，可以方便代碼調試。但我們總需要找尋一種更為省時省力的方法。
??????? X-UA-Compatible 是針對 IE8 版本的一個特殊文件頭標記，用于為 IE8 指定不同的頁面渲染模式。由于當下 IE6 和 IE7 使用率依然較高，綜合考慮，啟用 IE8 版本的 X-UA-Compatible 兼容模式顯得相當重要。
??????? 各種兼容模式代碼示例如下：
1.<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，這與 Windows Internet Explorer 5 顯示內容的方式很相似。

2.<meta http-equiv="X-UA-Compatible" content="IE=7" />
無論頁面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的標準渲染模式。

3.<meta http-equiv="X-UA-Compatible" content="IE=8" />
開啟 IE8 的標準渲染模式，但由于本身 X-UA-Compatible 文件頭僅支持 IE8 以上版本，因此等同于冗余代碼。

4.<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容，這實際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789，那么就調用高版本的那個也就是IE9。

?

5.<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

如果IE有安裝Google Chrome Frame，那么就走安裝的組件，如果沒有就和<meta http-equiv="X-UA-Compatible" content="edge" />一樣。

說明：針對IE 6，7，8等版本的瀏覽器插件Google Chrome Frame，可以讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核。

?

6.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令確定如何呈現內容。標準模式指令以Windows Internet Explorer 7 標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。對于多數網站來說，它是首選的兼容性模式。

?

??????? 目前，在開發AngularJS項目時（只支持IE8及以上版本或chrome/firefox），而有些同事IE8登錄卻還提示“請使用IE8及以上版本或chrome/firefox，如果您使用IE8，請在”工具”菜單中，調整為非”兼容性視圖”！

解決方法：

1.將項目中的.html及.jsp文件的<head>的最前面加上

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

（即如上meta加在其它meta之前）

如下所示：

Html代碼??收藏代碼
  1. <html>??
  2. <head>??
  3. <meta?http-equiv="X-UA-Compatible"?content="IE=edge"></meta>??
  4. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
  5. <meta?http-equiv="pragma"?content="no-cache"/>??
  6. <meta?http-equiv="cache-control"?content="no-cache"/>??
  7. <meta?http-equiv="expires"?content="0"/>??
  8. </head>??
  9. ...??
  10. </html>??

2.選擇“工具”菜單欄，點擊“兼容性視圖設置(B)”

????打開如下彈出框，將“在兼容性視圖中顯示Intranet站點(I)、在兼容性視圖中顯示所有網站(E)”這兩項前面的勾選框勾選掉（即不勾選上）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247766.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247766.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247766.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

java自定義異常報錯

java自定義異常報錯

public class TeamException extends Exception{static final long serialVersionUID -3387516993124229948L;public TeamException() {super();}public TeamException(String message) {super(message);} }
閱讀更多...
P多行溢出省略號的處理

P多行溢出省略號的處理

因為-webkit-line-clamp: 2不兼容火狐或IE&#xff0c;采用判斷瀏覽器的方式來啟用哪個方式先判斷是什么瀏覽器 //判斷是否是谷歌瀏覽器 if (!stripos($_SERVER["HTTP_USER_AGENT"], chrome)) {$this->registerCssFile(web/css/view.css); } 行內樣式&#xff08;…
閱讀更多...
縮小窗口時CSS背景圖出現右側空白BUG的解決方法

縮小窗口時CSS背景圖出現右側空白BUG的解決方法

頁面容器&#xff08;#wrap&#xff09;與頁面頭部&#xff08;#header &#xff09;為100%寬度。而內容的容器&#xff08;#page&#xff09;為固定寬度960px。瀏覽窗口縮小而小于內容層寬度時會產生寬度理解上的差異。如下圖所示窗口寬度大于內容層寬度&#xff1a; 改變瀏覽…
閱讀更多...
JAVA鏈接Mysql數據庫（一）

JAVA鏈接Mysql數據庫（一）

第一步自定義 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 創建 java 文件運行 import java.io.InputStream; import java.sql.Connection; import java…
閱讀更多...
優化器，SGD+Momentum；Adagrad；RMSProp；Adam

優化器，SGD+Momentum；Adagrad；RMSProp；Adam

Optimization 隨機梯度下降&#xff08;SGD&#xff09;&#xff1a; 當損失函數在一個方向很敏感在另一個方向不敏感時&#xff0c;會產生上面的問題&#xff0c;紅色的點以“Z”字形梯度下降&#xff0c;而不是以最短距離下降&#xff1b;這種情況在高維空間更加普遍。 SGD的…
閱讀更多...
iOS開發-平臺使用TestFlight進行Beta測試

iOS開發-平臺使用TestFlight進行Beta測試

使用 TestFlight&#xff0c;你可以向測試人員發布你 App 的 prerelease 版本來收集反饋信息&#xff0c;為將來發布 App 的正式版做準備。現在 TestFlight 是一個可選功能&#xff0c;你也可以不使用它&#xff0c;而是像以往發布 App 那樣直接提交到 appStore。 TestFlight 使…
閱讀更多...
QPixmap QImage 相互轉化

QPixmap QImage 相互轉化

QPainter p(this); QPixmap pixmap; pixmap.load("E:\\參考文件\\image\\1.jpg"); //QPixmap->QImage QImage tempImage pixmap.toImage(); p.drawImage(0,0,tempImage); QImage image; image.load("E:\\參考文件\\image\\1.jpg"); //QImage->QPixm…
閱讀更多...
java語言介紹 —（1）

java語言介紹 —（1）

1.基礎常識 軟件&#xff1a;即一系列按照特定順序組織的計算機數據和指令的集合。分為&#xff1a;系統軟件 和 應用軟件 系統軟件&#xff1a;windows , mac os , linux ,unix,android,ios,… 應用軟件&#xff1a;word ,ppt,畫圖板,… 人機交互方式&#xff1a; 圖形化界面…
閱讀更多...
微信小程序入門資源整理（熱更新）

微信小程序入門資源整理（熱更新）

從零開始&#xff1a;微信小程序新手入門寶典《一》 傳送門地址&#xff1a; https://segmentfault.com/a/1190000008035180 微信小程序部分資源整理 傳送門地址&#xff1a;http://blog.csdn.net/u012995964/article/details/53116477
閱讀更多...
第一個java程序helloworld —（2）

第一個java程序helloworld —（2）

1.開發體驗——HelloWorld 1.1 編寫 創建一個java源文件&#xff1a;HelloWorld.java class HelloChina{public static void main(String[] args){System.out.println("Hello,World!");} }1.2 編譯&#xff1a; javac HelloWorld.java 1.3 運行&#xff1a; java Hel…
閱讀更多...
高并發大流量專題---6、獨立圖片服務器的部署

高并發大流量專題---6、獨立圖片服務器的部署

高并發大流量專題---6、獨立圖片服務器的部署 一、總結 一句話總結&#xff1a; 獨立圖片服務器還是非常有必要的&#xff0c;可以很大程度的降低主服務器的io以及提升用戶訪問速度 1、獨立圖片服務器 獨立的必要性&#xff1f; 分擔Web服務器的I/O負載&#xff1a;將耗費資源的…
閱讀更多...
2017年蘋果公司開發者賬號申請與支付流程

2017年蘋果公司開發者賬號申請與支付流程

鄧白氏編碼下來之后&#xff0c;現在我們就可以走到付款流程&#xff0c;購置賬號了&#xff01;覺得有用的頂一下 1.登陸蘋果賬號&#xff0c;加入蘋果開發者 https://developer.apple.com/ 2.按照指示&#xff0c;一步步點擊進入就行了&#xff0c;反正你也看不懂&#xff08…
閱讀更多...
java關鍵字與標識符 —（3）

java關鍵字與標識符 —（3）

1.java關鍵字的使用 定義&#xff1a;被Java語言賦予了特殊含義&#xff0c;用做專門用途的字符串&#xff08;單詞&#xff09; 特點&#xff1a;關鍵字中所字母都為小寫 具體哪些關鍵字&#xff1a; 2.保留字&#xff1a;現Java版本尚未使用&#xff0c;但以后版本可能會作…
閱讀更多...
parentNode,parentElement,childNodes,children的區別

parentNode,parentElement,childNodes,children的區別

轉自鏈接&#xff0c;https://blog.csdn.net/CODING_1/article/details/78202693轉載于:https://www.cnblogs.com/RioPlus/p/11051630.html
閱讀更多...
2017年蘋果公司開發者賬號申請-公司鄧白氏編碼

2017年蘋果公司開發者賬號申請-公司鄧白氏編碼

申請公司的蘋果開發者賬號和企業級的蘋果開發者賬號時&#xff0c;都會用到鄧白氏編碼&#xff0c;也就是我們申請蘋果開發者賬號時需要填寫的D-U-N-S Number。 申請這個鄧白氏編碼是免費的&#xff0c;但是從像華夏鄧白氏公司提交申請到可以申請蘋果開發者賬號來用這個9位的D-…
閱讀更多...
java變量及進制問題 —（4）

java變量及進制問題 —（4）

1.變量的分類 1.1 按數據類型分類 詳細說明&#xff1a; //1. 整型&#xff1a;byte(1字節8bit) \ short(2字節) \ int(4字節) \ long(8字節) //① byte范圍&#xff1a;-128 ~ 127 // ② 聲明long型變量&#xff0c;必須以"l"或"L"結尾 // ③ 通常&…
閱讀更多...
Struts2的兩個蝴蝶飛,你好簡單開發（一）

Struts2的兩個蝴蝶飛,你好簡單開發（一）

我把你的頭像&#xff0c;設置成我的名字&#xff0c;此刻你便與我同在。我把你的名字&#xff0c;寫進我的代碼里面&#xff0c;以后&#xff0c;我的世界便存在著你。 “兩個蝴蝶飛”特別喜歡"java1234知識分享網"小峰的實用主義&#xff0c;所以本文及其系列文章均…
閱讀更多...
用Canvas畫圓環百分比進度條

用Canvas畫圓環百分比進度條

<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>canvas圓環進度</title><link rel"stylesheet" href"">…
閱讀更多...
java運算符 —（5）

java運算符 —（5）

1.算術運算符&#xff1a; - - * / % (前) (后) (前)-- (后)-- 【典型代碼】 //除號&#xff1a;/ int num1 12; int num2 5; int result1 num1 / num2; System.out.println(result1);//2 // %:取余運算 //結果的符號與被模數的符號相同 //開發中&#xff0c;經常使用%來…
閱讀更多...
利用SQL計算兩個地理坐標(經緯度)之間的地表距離

利用SQL計算兩個地理坐標(經緯度)之間的地表距離

兩個地理坐標(經緯度)地表距離計算公式&#xff1a; 公式解釋如下&#xff1a; Long1,Lat1表示A點經緯度&#xff0c;Long2,Lat2表示B點經緯度&#xff1b;aLat1–Lat2 為兩點緯度之差&#xff0c;bLong1-Long2為兩點經度之差&#xff1b;6378.137為地球半徑&#xff0c;單位為…
閱讀更多...
最新文章

Copyright @ 2022~2023