解决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.mzph.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