本地网页样式上传服务器后发生变化解决办法

这段时间给公司做了个网站,在本地用IE10,火狐,goolgeChrome,360浏览器通过页面样式测试。

本地通过测试后便上传到服务器,上传之后用IE10浏览发现有部份样式异常。火狐,goolgeChrome,360浏览与本地浏览样式效果一样。

    和平时一样,有问题找度娘。大部分网友说:编码问题,也有说样式没有加载更有说是缓存问题···,我用文本编辑器notepad++查看CSS文件发现ANSI格式,难道真是编码格式问题?立马改成UTF-8保存并上传至服务器。

    测试结果让并没有发生改变,看来不是编码问题。本地测试正常远程服务器上却异常,难不成是服务器环境的问题?自己马上搭建IIS,本地服务器环境很好就OK了,接着测试浏览结果都很正常。开始怀疑空间商的服务器环境了,因为我用的windows平台,空间商的是linux平台。难不我再搭建个linux平台再测试?

    静下心来想了想,其它浏览器都没问题就IE有问题,是不是应该在IE上找找问题呢?打开IE再次浏览远程服务器的网页,按下F12键打开发人员工具,忽然间我发现浏览器模式:IE10,文档模式:IE7。

    这里显然有问题,把文档模式改成标准。IE10页面马上发生变化与之前本地测试完全一样。至此问题原因以经找到。本地与远程服务器不一致的样式是因为IE10文档编码发生了变化。找到问题原因,便进入问题解决方案。

    解决方法在网页加入<meta http-equiv="X-UA-Compatible" content="IE=edge" >代码。X-UA-Compatible是针对 IE8 以上版本的一个特殊文件头标记,用于为 IE8 以上版本指定不同的页面渲

染模式,对于ie8之下的版本浏览器是不识别的。

在X-UA-Compatible中可用的方法有:

<meta http-equiv="X-UA-Compatible" content="IE=5" >

<meta http-equiv="X-UA-Compatible" content="IE=7" >

<meta http-equiv="X-UA-Compatible" content="IE=8" >

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

其中最后一行是Edge 模式,通知 Windows Internet Explorer 以最高级别的可用模式显示内容。

虽然这个问题已经解决,但最终暴露出另外两个问题 。

1、为什么我在本地搭建的IIS服务器,IE浏览文档模式是正常标准。而上传却变成了IE7?

2、说明CSS文件兼容性不是很完美在IE7或以下会发生异常。


本文出自 “谌大集团” 博客,请务必保留此出处http://52czy.blog.51cto.com/3704825/1548628

展开阅读全文

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