關於瀏覽器相容問題

来源:https://www.cnblogs.com/reyirfw/archive/2020/05/27/12971944.html
-Advertisement-
Play Games

關於瀏覽器相容問題 目前主流瀏覽器有IE，edge，Chrome，firefox，Opera(歐朋)，Safari(指南針) 由於目前的電腦操作系統很多，瀏覽器的版本迭代有很強，因此用戶的使用瀏覽器是參差不齊的，因此我們作為前端人員在設計網站在不同瀏覽器顯示效果時，相容性就很有必要考慮，最追求給用戶 ...


關於瀏覽器相容問題

目前主流瀏覽器有IE，edge，Chrome，firefox，Opera(歐朋)，Safari(指南針)

由於目前的電腦操作系統很多，瀏覽器的版本迭代有很強，因此用戶的使用瀏覽器是參差不齊的，因此我們作為前端人員在設計網站在不同瀏覽器顯示效果時，相容性就很有必要考慮，最追求給用戶在不同的瀏覽器的最好的瀏覽體驗，使用瀏覽器相容測試工具：BrowserStack，這個是收費的，如果要免費的，可以使用IE Test或者Browsershots工具

  1. windowPX系統

    1. IE ：6，7，8
    2. edge：不支持
    3. Chrome：最高49版本，最低15版本
    4. firefox：最高52版本,最低3版本
    5. Opera：最高36版本，最低10.6版本
    6. Safari：最高5.1版本，最低4版本

  2. window7

    1. IE ：8，9，10，11
    2. edge：最高81版本，最低80版本
    3. Chrome：最高83版本，最低15版本
    4. firefox：最高76版本，最低3版本
    5. Opera：最高68版本，最低10.6版本
    6. Safari：最高5.1版本，最低4版本

  3. window8

    1. IE ：10
    2. edge：80，81(latest)，83，84
    3. Chrome: 最高83版本，最低22版本
    4. firefox: 最高76版本，最低16版本
    5. Opera: 最高68版本，最低12版本
    6. Safari: 5.1版本

  4. window8.1

    1. IE ：11
    2. edge：80，81(latest)，83，84
    3. Chrome: 最高83版本，最低22版本
    4. firefox: 最高76版本，最低16版本
    5. Opera: 最高68版本，最低12版本
    6. Safari: 5.1版本

  5. window10

    1. IE ：11
    2. edge：15，16，17，18，80，81(latest)，83，84
    3. Chrome：最高83版本，最低37版本
    4. firefox： 最高76版本，最低32版本
    5. Opera： 最高68版本，最低23版本
    6. 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=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=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>

使IE5,IE6,IE7相容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>

使IE5,IE6,IE7,IE8相容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>

解決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瀏覽器。


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

-Advertisement-
Play Games
更多相關文章
  • 5.標簽篇:audio和video
    # 5.標簽篇:audio和video - audio 和 video ```html <style> * { margin:0; padding:0; } .video_player{ position:relative; width:1000px; height:500px; margin:0  ...
  • 4.標簽篇:SVG
    # 4.標簽篇:svg - SVG:矢量圖，放大不會失真，適合大面積的貼圖，通常動畫較少或較簡單。使用標簽和CSS去畫 canvas：適合用於小面積的繪圖，適合動畫 ```html <style> .line1{ stroke:black; stroke-width:10px; } .line2{ ...
  • Chrome自動刷新網頁腳本
    腳本用於在Chrome的Console內定時刷新網頁 timeout=prompt("Set timeout (Second):"); count=0 current=location.href; if(timeout>0) setTimeout('reload()',1000*timeout); ...
  • 寫了一個deno 的demo，說說我的看法
    上周某個普通的一天，deno 1.0發佈了。於是利用業餘時間寫了一個服務端的程式。 GIT：https://github.com/shinku/deno-demokoa 之於 node，相當於oak就之於deno了。 雖然是奇怪的設定，不過僅僅換了個字母順序而已，koa 和 oak 就是一個同父異母 ...
  • SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（五）：引入 vue-router 進行路由管理、模塊化封裝 axios 請求、使用 iframe 標簽嵌套頁面
    前提： （1） 相關博文地址： SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（一）：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html SpringBoot + Vue + ElementUI 實現 ...
  • 通過NodeJS爬蟲分析某東內衣銷售記錄帶你們瞭解妹紙們的真實Size
    通過 NodeJS 爬蟲分析某東內衣銷售記錄，帶你們瞭解妹紙們的真實 Size 是不是很好奇？這種數據是需要通過大數據進行分析的，我們沒有大數據怎麼搞？ 很好搞 某東的銷售數據是公開透明的，我們只需要用爬蟲去爬一下，簡不簡單？ 很簡單 跟著我的節奏，下麵直接上乾貨 有些猴急猴急的同學啊， 我也不好說 ...
  • JavaScript變數語法擴展
    1.更新變數 一個變數被重新賦值後，它原有的值會被覆蓋，變數值將會以最後一次賦值為準。 2.同時聲明多個變數 var age = 18 , address ='火影村' , gz = 2000 ; 3.聲明變數的特殊情況： // 2.聲明多個變數 var age =18, address = '火影 ...
  • 循序漸進VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理
    在我開發的很多系統裡面，包括Winform混合框架、Bootstrap開發框架等系列產品中，我都傾向於動態配置菜單，並管理對應角色的菜單許可權和頁面許可權，實現系統對用戶許可權的控制，菜單一般包括有名稱、圖標、順序、URL連接等相關信息，對於VUE+Element 前端應用來說，應該原理上差不多，本篇隨筆... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類