关于浏览器兼容问题

关于浏览器兼容问题

目前主流浏览器有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浏览器。