页面在本地服务器显示正常,上传到服务器后用IE9打开部分样式丢失的问题
2016-11-03 23:13
579 查看
前段时间做了一个虚拟币交易所的项目,在前端部分完成之前有进行过兼容性测试,除了一些H5交互特效,其他都能在IE8正常显示。
等到后来,后台部分完成后,上传到服务器,客户用IE9打开,发现很多样式都丢失了,检查了很久,发现了很古怪的问题:
用IE9打开本地服务器上的页面没有任何问题,但是一上传到远程服务器,页面就乱了。
研究了一个下午,发现项目只要一上传到服务器上,就会把页面改为默认用兼容性视图来显示,要手动去修改IE上的文档模式,但是我们又不能让每个用户打开页面的时候都去设置一下,所以这个时候万能的meta标签又派上用场了:
< meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”>
这个标签的意思是:
让当前的IE浏览器用当前可用最高版本去渲染页面,如果是双核浏览器(例如360双核浏览器同时拥有IE和Chrome内核)就默认用Chrome内核去渲染当前页面。
所以这样就能让IE用当前最高版本去渲染页面了,在每一页的< head>< /head>标签中加入这一句,就可以了。
默认行为大致有这些:
存在于注册表中的兼容性视图列表,当url匹配时将自动切换到兼容性视图
在注册表中的对应字段指定了使用兼容性视图来显示所有网站
未指定DOCTYPE,则使用Quirks模式
之前的IE6和IE7为了实现更多的功能,其代码规范与 W3C 的标准有许多出入,由于IE的市场占有率一直远超过其他浏览器,所以绝大多数的网站开发人员都会按照 IE6/7 的规范来编写代码。这样,在新的IE8中,网页就有可能像其他浏览器一样,出现显示不正常等水土不服的情形。
为了解决这样的问题,IE8浏览器增加了一种叫做“兼容性视图”的功能,可以让网页以IE6/7的代码规范来显示,这样,就能够很好的解决大部分由于代码标准不一致引起的网页问题。
本部分引用地址:http://www.iefans.net/shanchu-ie9-wenjianjia/ 作者:iefans
然而用IE6/7的代码规范来显示你的页面,当然就会出问题了 :)
等到后来,后台部分完成后,上传到服务器,客户用IE9打开,发现很多样式都丢失了,检查了很久,发现了很古怪的问题:
用IE9打开本地服务器上的页面没有任何问题,但是一上传到远程服务器,页面就乱了。
研究了一个下午,发现项目只要一上传到服务器上,就会把页面改为默认用兼容性视图来显示,要手动去修改IE上的文档模式,但是我们又不能让每个用户打开页面的时候都去设置一下,所以这个时候万能的meta标签又派上用场了:
< meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”>
这个标签的意思是:
让当前的IE浏览器用当前可用最高版本去渲染页面,如果是双核浏览器(例如360双核浏览器同时拥有IE和Chrome内核)就默认用Chrome内核去渲染当前页面。
所以这样就能让IE用当前最高版本去渲染页面了,在每一页的< head>< /head>标签中加入这一句,就可以了。
再多说几句:
有哪些会自动触发兼容性文档视图?
有些因素会自动触发兼容性文档视图,这个时候设置X-UA-Compatible就可以防止这个自动触发的行为。默认行为大致有这些:
存在于注册表中的兼容性视图列表,当url匹配时将自动切换到兼容性视图
在注册表中的对应字段指定了使用兼容性视图来显示所有网站
未指定DOCTYPE,则使用Quirks模式
为什么服务器把页面改成默认用兼容性视图打开就会乱?
从IE8浏览器开始,微软向 Web 标准进行靠拢,以便让各种浏览器可以更好的兼容网站中使用的代码,开发人员不用花太多精力使用不同的方法在各种的浏览器上实现自己需要的效果,用户也可以更自由的选择使用自己喜欢的浏览器。之前的IE6和IE7为了实现更多的功能,其代码规范与 W3C 的标准有许多出入,由于IE的市场占有率一直远超过其他浏览器,所以绝大多数的网站开发人员都会按照 IE6/7 的规范来编写代码。这样,在新的IE8中,网页就有可能像其他浏览器一样,出现显示不正常等水土不服的情形。
为了解决这样的问题,IE8浏览器增加了一种叫做“兼容性视图”的功能,可以让网页以IE6/7的代码规范来显示,这样,就能够很好的解决大部分由于代码标准不一致引起的网页问题。
本部分引用地址:http://www.iefans.net/shanchu-ie9-wenjianjia/ 作者:iefans
然而用IE6/7的代码规范来显示你的页面,当然就会出问题了 :)
相关文章推荐
- 火狐打开本地bootstrap页面,小图标无法正常显示问题
- Stackoverflow 打开慢或样式(CSS)无法正常显示问题
- html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决
- 页面在IE9中打不开,需要按F12,再刷新,才可以正常打开(PS:由于console.log在IE中的兼容问题)
- [PHP] 本地服务器正常,FTP上传到服务器后页面出现乱码
- 本地运行项目支持nvarchar类型,上传到weblogic,打开服务器,点开页面就报错
- 【ASP.NET】10.解决百度富文本编辑器UEditor本地上传图片正常,放到服务器上以后图片上传按钮变灰不能点击的问题
- SPS安装过程中配置服务器场帐户设置页面不能正常显示以及IIS中SPS管理站点未配置成功问题的原因
- fckeditor上传的小窗口在IE9下不能正常显示的问题解决办法
- ecmall2.3.0 前后台样式等无效,导致前台页面显示不正常问题解决
- jqGrid 从服务器读取json数据不显示问题 ; 样式不正常问题
- 某云RDS数据库本地恢复--服务器重启数据库打开丢失问题--亲验
- PHP使用之上传文件到本地服务器(实现上传文件后页面内容不动、解决上传文件命名乱码后缀问题)
- 本地环境代码正常,上传服务器则出现问题,几种可能情况分析
- 微信支付二维码本地测试可以,上传到服务器不显示问题
- 上传图片,为什么在本地wamp上的图片上传正常,移动到服务器上就出现问题了?
- 百度编辑器本地上传图片可以正常显示,部署到服务器上就显示不出来只显示图片的名字
- 本地页面能显示,服务器上显示不出来的问题
- swf在flash里面正常显示。本地打开无法访问的问题(读本地config文件)
- 调用系统相册上传图片到服务器--OPPO等部分手机上出现短暂的显示桌面问题