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

最新推荐文章于 2021-06-23 14:36:25 发布
最新推荐文章于 2021-06-23 14:36:25 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： 项目遇到问题 知识随笔总结js 前端 文章标签： 前端兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34507902/article/details/107198316
版权

最近做一个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浏览器（极速模式）、搜狗浏览器测试通过.

 

怒放的生命1991
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE支持HTML5的解决方法
12-13
自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。 使用和下载 　　html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。) 　　作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件。 http://html5shiv.googlecode.com/svn/trunk/html5.
sexy-table:漂亮HTML5表格不是表格
05-04
性感表 漂亮HTML5表格不是表格:) 这个项目是我将要参与的一个即将到来的商业项目中使用的一个概念。 我一直在寻找像这样的客户端组件： 我想要一个可排序，可过滤，可搜索和可分页的表。 我还遵循一个设计，该设计需要各种花哨的阴影，动画和其他CSS3好东西，这些东西不容易应用于传统HTML <table> 。 Dynatable最接近满足我的要求。 请参阅： : 但是我已经在使用客户端视图框架Transparency.js，而且我觉得Dynatable和Transparency之间有很多重叠。 参见： : 那么什么是SexyTable： 它是一个类似于客户端组件的表，并使用HTML，CSS和JS构建。 实际上，可以使用新的Web组件API对其进行重构。 但是，我需要IE8 +兼容性，并且认为Web组件对于我的商业项目来说太新了。 请参阅： ： < div class
浅谈浏览器兼容性模式[按F12便知]
01-21
面试官：请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式，当你打开IE9时候会看见，浏览器模式，文档模式，兼容性视图，这些又是什么？ 好吧，一点点来：先明白一个词DTD（文档类型定义），也就是你F12后，页面里第一行的一串东西，即doctype声明。 这一串东西就是告诉浏览器你要用何种模式来渲染页面，说白了就是让浏览器用何种标准的CSS进行页面布局。 有三种模式供你选择： 标准模式（Standards Mode） 准标准模式（Almost Standards Mode） 怪癖模式（Quirks Mode）
IE9兼容性视图与IE9标准视图
weixin_30666943的博客
11-19 161
如果你使用的是IE9，那么按下F12键就会出现开发者工具，上面有两个下拉菜单：浏览器模式和文档模式。那么什么是浏览器模式？什么又是文档模式？二者有何区别？ 浏览器模式用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件注释解析、以及发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和及安装的功能，这样就可以根据不同...
html设置ie9兼容性视图,ie9兼容性设置在哪里 IE兼容性视图在哪里设置？
weixin_35985796的博客
06-15 3895
找不到“兼容性视图设置”子菜单如何在360浏览器 IE9上设置兼容性视图还有一种方法打开菜单栏，就是鼠标右键点击上方的空白处，选择“菜单栏”，然后菜单栏就显示“工具”。【兼容性视图设置】的窗口，选择“添加此网址”。IE兼容性视图设置在哪 兼容性视图怎么设置在浏览器右上角的设置里设置，设置方法如下： 方法1首先，打开电脑，找到电脑桌面上的IE浏览器，并点击打开，打开后，进入任一网页，找到页面右上方的...
html5响应式布局，兼容ie7.8
ZuoYanDeHuangHun的专栏
08-19 2982
1：Meta标签 2，IE8或者更早的浏览器并不支持Media Query。在此引入respond.js 3，html结构 4，媒介查询-Media Queries         CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。         当视图宽度为
自动设置为兼容模式html5,360浏览器怎么样让某网站自动以兼容模式打开
weixin_39616071的博客
06-09 575
在使用浏览器的时候，可以通过默认形式内核打开网页，但是有一部分网页不支持急速模式，两种模式相互切换非常的不方便，但是我们可以以自动的形式打开兼容模式，这样就可以减少用户的麻烦，让用户可以随时掌握最便捷、流畅的搜索服务，那么到底要如何操作呢，具体要如何操作呢，让我们一起来看看具体的设置方法吧！今天小编就会教大家使用一种非常简单的方式在使用浏览器的时候打开就是极速模式，方便用户的使用，那么就让我们来看...
html5浏览器兼容ie,HTML-Learning | HTML5浏览器兼容性解决方案
weixin_42366319的博客
06-05 382
HTML5浏览器兼容性解决方案HTML5新增语义标签，以及如何兼容老版本浏览器。前言HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体。例如：video 标签和 audio 及 canvas 标记。而HTML5在取消了过时的显示效果标记 和 等同时，也引入了一些新的语义标签，例如：更多的语义标签请参考一、语义标签兼容性1. 解决思路主流浏览器都兼容...
ie11对html5支持度,html5最新浏览器支持程度比较
weixin_42362885的博客
06-23 686
简易测试如图:360极速浏览器测试的(内核是chromium 42) – 极速模式; 我稍微看了下不支持的特性…都是比较少用到的特性…. 所以总体来说,在H5和CSS3下的体验是相当良好的而我本地的chrome 43 的分数才521 . 还少了两分,可能优化还没做好….最新的44版本,526,在所有浏览器中,对HTML5支持是最为完善的;IE11和edge(WIN 10下的),我测试了下,,对HT...
致WEB前端开发者:IE6-IE11兼容性问题列表及解决办法
03-13
致WEB前端开发者:IE6-IE11兼容性问题列表及解决办法
content=”IE=7, IE=9″意思理解
08-22
公司的项目在老总的IE9下无法正常访问了。 哎，苦逼啊。本以为搞定了IE6,7,8,firefox,chrome,safari，opera，就行了。 尼玛的单独一个IE6就够咱折腾会了。 以前没有IE9的时候，为了照顾ie8就写个<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>强制使IE8浏览器使用IE7模式渲染。 昨天看淘宝页面源代码<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=9″>加了个。 不知用意，请教高人好多都不清楚。 查阅资料发现，那个是英文的，基础差。 大致翻译是如果你有一个使用X-UA-Compatible Meta 标签或者http header 让网页在IE7标准模式解释的旧网站，那么这里有一个综合示例能够让ie8用ie7的标准模式呈现页面，ie9使用ie9的标准模式呈现页面。用自己的话就是使用上面<meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=9″>，使IE7 IE8浏览器使用IE7模式渲染。IE9就用自己的IE9模式渲染。互不影响，不晓得是否正确，准备安装W7去。 欢迎各位朋友拍砖，求指点，求进步。 转自http://www.jqueryba.com/77.html
让所有IE支持HTML5的解决方案
03-20
NULL 博文链接：https://axl234.iteye.com/blog/879833
借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧
01-19
从 IE 8 开始，IE 添加了兼容模式，开启后会以低一版本的 IE 进行渲染。...但是我就遇到了一种情况，在 IE8 下只有不使用兼容模式页面才能显示正常，但是如果设定为 IE8 的模式，在 IE9 中却会导致 C
前端html5框架ZUI1.2版
11-18
前端html5框架ZUI发布1.2正式版本了！ 此版本增加了很多新特性，同时修复问题，文档也得到大幅完善...27、大幅优化代码，修复一些在Javascript代码中的错误，完善关键代码注释，增强部分代码文件与requierejs的兼容性
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
02-28
Webview WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件，提供一个屏幕，用户可以用来交互为了完成某项任务，是一个负责与...
如何在自定义的js文件中获取vuex中state实时变化的值
热门推荐
qq_34507902的博客
06-17 1万+
//filter.js import store from 'store'; store.state
将vue methods方法挂载到全局window对象，给app端或后台使用 vue项目
qq_34507902的博客
06-11 6928
通过jsBridge方法，H5可以调用客户端（ios，android）的内部方法，同样，客户端也需要能调用H5页面里定义的js方法，但是在vue里，所有的方法都是在组件内部声明的，也只能在组件内部调用，并没有绑定window对象下面，这样一来，vue组件里定义的方法怎么暴露给window对象，提供给外部调用呢？ created() { }, mounted() { /*将backToday方法绑定到window下面，提供给外部调用 后端在使用的时候调取backToday即可 我们前端..
Vue中使用swiper插件实现轮播图
qq_34507902的博客
06-23 2378
Vue中集成使用swiper插件实现轮播图 集成vue-awesome-swiper组件支持vue的写法:终端输入如下命令下载vue-awesome-swiper和swiper
edge兼容模式设置ie11
最新发布
04-28
IE11中的edge兼容模式指的是在IE11中使用了和Microsoft Edge浏览器一样的引擎（EdgeHTML）来渲染网页，为了解决一些旧网站可能无法适配IE11引擎的问题，在IE11中引入了Edge兼容模式。 若要启用Edge兼容模式，首先要打开IE11浏览器，然后依次点击“工具”、“兼容性视图设置”。在弹出的窗口中，勾选上“在兼容性视图中显示网站”，并且在下面的文本框中输入需要启用Edge兼容模式的网站网址，最后点击“添加”按钮即可把该网站添加至IE11的Edge兼容模式列表中。 启用Edge兼容模式后，IE11会使用EdgeHTML引擎来渲染加入兼容模式列表中的网站，以达到更好的兼容性和更好的用户体验。但是需要注意的是，启用Edge兼容模式可能会导致部分网站的某些功能或布局出现问题。因此，建议仅在需要时启用Edge兼容模式，并在使用完毕后及时取消，以保证IE11浏览器的正常使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值