页面在本地服务器显示正常,上传到服务器后用IE9打开部分样式丢失的问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/oulihong123/article/details/53027821

前段时间做了一个虚拟币交易所的项目,在前端部分完成之前有进行过兼容性测试,除了一些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>标签中加入这一句,就可以了。


再多说几句:

有哪些会自动触发兼容性文档视图?

有些因素会自动触发兼容性文档视图,这个时候设置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的代码规范来显示你的页面,当然就会出问题了 :)

展开阅读全文

没有更多推荐了,返回首页