關于瀏覽器兼容問題
目前主流瀏覽器有IE，edge，Chrome，firefox，Opera(歐朋)，Safari(指南針)
由于目前的電腦作業系統很多，瀏覽器的版本迭代有很強，因此用戶的使用瀏覽器是參差不齊的，因此我們作為前端人員在設計網站在不同瀏覽器顯示效果時，兼容性就很有必要考慮，最追求給用戶在不同的瀏覽器的最好的瀏覽體驗，使用瀏覽器兼容測驗工具：BrowserStack，這個是收費的，如果要免費的，可以使用IE Test或者Browsershots工具
-
windowPX系統
- IE ：6，7，8
- edge：不支持
- Chrome：最高49版本，最低15版本
- firefox：最高52版本,最低3版本
- Opera：最高36版本，最低10.6版本
- Safari：最高5.1版本，最低4版本
-
window7
- IE ：8，9，10，11
- edge：最高81版本，最低80版本
- Chrome：最高83版本，最低15版本
- firefox：最高76版本，最低3版本
- Opera：最高68版本，最低10.6版本
- Safari：最高5.1版本，最低4版本
-
window8
- IE ：10
- edge：80，81(latest)，83，84
- Chrome: 最高83版本，最低22版本
- firefox: 最高76版本，最低16版本
- Opera: 最高68版本，最低12版本
- Safari: 5.1版本
-
window8.1
- IE ：11
- edge：80，81(latest)，83，84
- Chrome: 最高83版本，最低22版本
- firefox: 最高76版本，最低16版本
- Opera: 最高68版本，最低12版本
- Safari: 5.1版本
-
window10
- IE ：11
- edge：15，16，17，18，80，81(latest)，83，84
- Chrome：最高83版本，最低37版本
- firefox： 最高76版本，最低32版本
- Opera： 最高68版本，最低23版本
- Safari：5.1版本
以上是對window作業系統的各版本的瀏覽器支持程度
Meta http-equiv屬性詳解
http-equiv顧名思義，相當于http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值，
參考
meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="引數" content="引數變數值"＞ ；其中http-equiv屬性主要有以下幾種引數：
1、Expires(期限)
說明：可以用于設定網頁的到期時間，一旦網頁過期，必須到服務器上重新傳輸，
用法：
Html代碼
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
注意：必須使用GMT的時間格式，
2、Pragma(cache模式)
說明：是用于設定禁止瀏覽器從本地機的快取中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出
用法：
Html代碼
<meta http-equiv="Pragma" content="no-cache"＞
注意：這樣設定，訪問者將無法脫機瀏覽，
3、Refresh(重繪)
說明：自動重繪并指向新頁面，
用法：
Html代碼
<meta http-equiv="Refresh" content="2；URL=http://www.net.cn/">
注意：其中的2是指停留2秒鐘后自動重繪到URL網址，
4、Set-Cookie(cookie設定)
說明：如果網頁過期，那么存盤的cookie將被洗掉，
用法：
Html代碼
<meta http-equiv="Set-Cookie" content="cookievalue=https://www.cnblogs.com/reyirfw/p/xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/">
注意：必須使用GMT的時間格式，
5、Window-target(顯示視窗的設定)
說明：強制頁面在當前視窗以獨立頁面顯示，
用法：
Html代碼
<meta http-equiv="Window-target" content="_top">
注意：用來防止別人在框架里呼叫自己的頁面，
6、content-Type(顯示字符集的設定)
說明：設定頁面使用的字符集，
用法：
Html代碼
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
7、Pics-label(網頁等級評定)
用法：
Html代碼
<meta http-equiv="Pics-label" contect="">
說明：在IE的internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制級別就是通過meta屬性來設定的，
8、Page_Enter、Page_Exit
設定進入頁面時的特殊效果
Html代碼
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">
設定離開頁面時的特殊效果
Html代碼
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">
Duration的值為網頁動態過渡的時間，單位為秒，
Transition是過渡方式，它的值為0到23，分別對應24種過渡方式，如下表：
0 盒狀收縮 1 盒狀放射
2 圓形收縮 3 圓形放射
4 由下往上 5 由上往下
6 從左至右 7 從右至左
8 垂直百葉窗 9 水平百葉窗
10 水平格狀百葉窗 11垂直格狀百葉窗
12 隨意溶解 13從左右兩端向中間展開
14從中間向左右兩端展開 15從上下兩端向中間展開
16從中間向上下兩端展開 17 從右上角向左下角展開
18 從右下角向左上角展開 19 從左上角向右下角展開
20 從左下角向右上角展開 21 水平線狀展開
22 垂直線狀展開 23 隨機產生一種過渡方式
9、清除快取（再訪問這個網站要重新下載！）
Html代碼
<meta http-equiv="cache-control" content="no-cache">
10、關鍵字,給搜索引擎用的
Html代碼
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11.頁面描述
Html代碼
<meta http-equiv="description" content="This is my page">
12.瀏覽器兼容性設定
<meta http-equiv="X-UA-Compatible" content="IE=edge">
設定網站服務器以指定預設兼容性模式
如果服務器是自己的話，可以在服務器上定義一個自訂標頭來為它們的網站預設一個特定的檔案兼容性模式，這個特定的方法取決于你的網站服務器，
錄入，下列的 web.config檔案使Microsoft Internet Information Services (IIS)能定義一個自訂標頭以自動使用IE7 mode來編譯所有網頁，
另外還有一起其他的解決方案，例如google的
ie7 – js中是一個JavaScript庫（解決IE與W3C標準的沖突的JS庫），使微軟的Internet Explorer的行為像一個Web標準兼容的瀏覽器，支持更多的W3C標準，支持CSS2、CSS3選擇器，它修復了許多的HTML和CSS問題，并使 得透明PNG在IE5、IE6下正確顯示，
使IE5,IE6兼容到IE7模式（推薦）
<!–[if lt IE 7]>
<script src=https://www.cnblogs.com/reyirfw/p/”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
使IE5,IE6,IE7兼容到IE8模式
<!–[if lt IE 8]>
<script src=https://www.cnblogs.com/reyirfw/p/”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
使IE5,IE6,IE7,IE8兼容到IE9模式
<!–[if lt IE 9]>
<script src=https://www.cnblogs.com/reyirfw/p/”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
解決PNG顯示問題
只需將透明png圖片命名為*-trans.png
需要注意的是：此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,默認會占滿整個容器，
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
創建html5時發現這么一句話，不知其什么意思，百度如下：
這 樣寫可以達到的效果是如果安裝了GCF，則使用GCF來渲染頁面，如果沒安裝GCF，則使用最高版本的IE內核進行渲染，Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34089.html
標籤：Html/Css
上一篇：如何在博客園添加自己的頭像