解决IE11兼容HTML5 设置:设置兼容性视图网站正常显示网页

最近做一个Web html5网站，在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在IE8及IE11下发现样式无法显示，然后各种百度啊，最后在雅朋网的一个网友帖子的帮助下解决了问题，现在将解决方法总结如下：

首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，具体会影响：

对标记attributes 、properties的约束规则
对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析
DOCTYPE是非常关键的，目前的最佳实践就是在HTML文档的首行键入：
<!DOCTYPE html>

1.针对浏览器的内容做标识（使用meta标签调节浏览器的渲染方式）
为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中

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

IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。

tip:<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />要放在文档最上面不然不生效的

2.IE8不支持HTML5的几个属性
IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的一起使用.

3.JS与CSS的引入顺序导致的问题
必须先引用css在引用js

1 2	`<link` `rel="stylesheet"` `type="text/css"` `href="programmer.css"` `media="screen"/>` `<script` `type="text/javascript"` `src="js/programmer.js"></script>`

4.DOCTYPE前后有空行
<!DOCTYPE html>
这里有空格也不行，要去掉空格
<html>

以上IE11,chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器测试通过.

解决IE11兼容HTML5 设置:设置兼容性视图网站正常显示网页相关推荐

【名说】脚本程序转桌面exe应用自动打开IE浏览器至指定页面内并自动设置好兼容性视图
[需求描述]:对于B/S系统,需要用户打开IE浏览器访问,并且需要设置IE的兼容性视图,将指定网址添加进兼容性视图里,操作看起来很繁琐,用户想要桌面上有个图标,点一下就可以直接进入页面,并且不需要自己 ...
【Windows】IE11中添加网址到兼容性视图列表无法保存的解决方法
安装过IE11的用户可能会发现这个一个变化,就是在地址栏右侧不再显示"兼容性视图"按钮了.当我们遇到不兼容的网站以后,只能在兼容性设置里面将网址添加至兼容性列表,或者启用企业模式. ...
html设置ie9兼容性视图,ie9浏览器设置兼容性视图在哪里设置
当您在使用IE9打开为早期IE版本所设计的网页时,可能会无法正常浏览.此时您可以尝试一下IE的兼容性视图功能来解决这个问题.下面由学习啦小编为你整理了ie9浏览器设置兼容性视图在哪里设置的相关方法,希 ...
IE11兼容IE8的设置
我们在使用ie11浏览器的时候,有些网站的兼容性不是太好,这个时候就要设置下ie11的兼容性了.那么ie11浏览器怎么设置兼容IE8呢?下面就让小编给大家介绍一下吧. 首先我们打开电脑里面的ie11浏 ...
html如何设置ie6兼容性视图,IE6浏览器兼容性视图设置在哪里
ie6浏览器算是旧版本了,如果你想要设置兼容性视图,该怎么设置呢?下面由学习啦小编为大家整理了IE6浏览器的兼容性视图设置在哪里的方法,希望对大家有帮助! IE6浏览器兼容性视图设置在哪里 IE6兼容 ...
html如何设置ie6兼容性视图,ie6浏览器设置兼容性视图的操作步骤
当前很多网友才刚刚使用ie6浏览器,还不熟悉设置兼容性视图的操作,那么ie6浏览器如何设置兼容性视图呢?接下来小编就来讲解ie6浏览器设置兼容性视图的操作步骤,相信一定可以帮助到你们. 打开浏览器后, ...
i8本地兼容html5文件,浏览器兼容性
前端开发遇到的浏览器兼容性问题产生这个问题的主要原因是不同浏览器的内核不同,对网页的解析结果就产生了差异. 解决浏览器兼容性问题,主要从三方面考虑:html,css,js. html部分 1.调用C ...
解决在谷歌浏览器下载时文件名包含逗号导致页面显示网页不可用问题
项目场景: 自己开发的文件服务项目在使用时测试反馈在下载文件时,文件名包含逗号时下载失败,无法跳转到下载链接页面. 项目使用springboot开发,文件的上传基于SpringMVC的表单文件上传.但 ...
vue 解决ie11兼容问题
一.ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser Promise为ES6语法,有的浏览器不支持ES6, ...

解决IE11兼容HTML5 设置:设置兼容性视图网站正常显示网页

解决IE11兼容HTML5 设置:设置兼容性视图网站正常显示网页相关推荐

最新文章

热门文章