网站在IE内核浏览器兼容模式下CSS失效如何解决

- 编辑:慢熊科技 -

珠海SEO博客今天正式建立起来,在建站的过程中小编发现我的网站在IE内核浏览器(包括搜狗浏览器、360浏览器等)的兼容模式下打开时候乱码,网页排列混乱。这种问题基本上是一个现象:CSS失效,完全没有加载出来。而在使用极速模式时候,网页完全正常。
        起初,我认为是所谓的兼容性问题。于是查阅了大量资料,这些资料显示此类问题的解决办法基础上都是:除了你CSS代码确实不存在问题的话那么就在页面头部发布一段代码,强制IE浏览器使用最高版本内核来访问本页面。其中以百度页面最为合适:

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

这个是比较正规实用的,另外针对360浏览器,也会产生这种类似CSS不加载的情况,360官方给出的解决办法是:

<meta name="renderer" content="webkit">

现在2017年这个代码基本上只针对360浏览器有效,搜狗浏览器等无效。网上的办法基本上就是以上两种,小编在尝试了所有解决办法之后依然没有解决在我的这台电脑上的问题。于是继续找资料,直到点开了知乎。知乎点开后理论上是一个登陆注册界面,然后在我的电脑上却显示的是我的浏览器内核版本过低,叫我升级浏览器。我一下子就明白了,原来是我的电脑上内置的IE浏览器内核版本过低导致出现兼容模式无法加载CSS致使CSS样式表失效的问题。而在其他电脑上用更高版本的IE内核时候并未出现此类问题。

所以总结起来就是除了使用上面所说到的百度和360针对兼容模式的代码,另外一种方式就是增加一段判断用户浏览器版本的代码。如果用户浏览器IE内核过低,则提示用户升级版本,否则就请用户使用极速模式打开本网站。

以上就是针对网站在IE内核浏览器兼容模式下CSS失效不加载的回答,拱大家参考,如果有疑问可以在本页下方评论专区交流。

2017年9月20日更新,目前我找了更好的用css hack,把下面这个申明代码,放到head里面。

<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7;IE=6; IE=EDGE">