在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。

处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)

html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

respond:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

我们解决的问题, 主要是针对于ie低版本的,也就是只有低版本ie才执行才对。

     <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

条件注释

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

解决ie低版本不认识html5标签的更多相关文章

  1. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  2. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  3. 让低版本IE支持Html5的新语义标签

    HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5. ...

  4. 解决用低版本的客户端ORACLE 12提示ORA-28040的异常

    用低版本的客户端访问ORACLE 12,无法连接,提示信息为ORA-28040.解决办法如下: 1.把sqlnet.ora文件添加两行(或者修改),修改文件后直接生效,不需要重启服务和监听的: SQL ...

  5. 解决vue低版本安卓手机兼容性问题

    低版本的安卓手机可能会白屏,是由新特性不支持引起的 解决代码es6新特性兼容问题 1,npm 安装 npm install babel-polyfill npm install es6-promise ...

  6. IE低版本下实现html5的placeholder(表单提示)功能

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  7. 让低版本浏览器支持html5的标签

    原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...

  8. vue解决IOS10低版本白屏问题

    一.方案一 在build文件的webpack.prod.conf.js文件添加以下代码 new UglifyJsPlugin({ uglifyOptions: { compress: { warnin ...

  9. 解决ie 低版本的 background-size 兼容问题

    在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.A ...

随机推荐

  1. 对flex深入研究一点

    flex顶层设计 1.在任何流动的方向上(包括上下左右)都能进行良好的布局 2.可以以逆序 或者 以任意顺序排列布局 3.可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列 4.可以弹性的在任意的容器 ...

  2. React native 之 async/await

    参考资料 :https://www.jianshu.com/p/1e75bd387aa0 要点: 1. async function(){} 将普通函数转换成Promise 2. await 表达式/ ...

  3. html article标签 语法

    html article标签 语法 article标签有什么作用?直线电机生产厂家 作用:html中article标签的作用是规定独立的自包含内容,其中外部内容是来自一个外部的新闻提供者的一篇新文章, ...

  4. XML 验证

    拥有正确语法的 XML 被称为“形式良好”的 XML. 通过 DTD 验证的 XML 是“合法”的 XML. 形式良好的 XML 文档 “形式良好”或“结构良好”的 XML 文档拥有正确的语法. “形 ...

  5. Maven Waring : GroupId is duplicate of parent groupId 和 Version is duplicate of parent version

    问题描述: 新项目在创建的时候,因为用到了分模块的,所以导致子模块的pom文件,报了 如下警告: 解决办法: 直接 Window --> Preferences -->  Maven -- ...

  6. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  7. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  8. 8.并发编程--多线程通信-wait-notify-模拟Queue

    并发编程--多线程通信-wait-notify-模拟Queue 1. BlockingQueue 顾名思义,首先是一个队列,其次支持阻塞的机制:阻塞放入和获取队列中的数据. 如何实现这样一个队列: 要 ...

  9. Run nginx from Docker in Windows

    1.首先, 使用 docker run hello-world 命令 确认 docker 在本地安装成功,若成功应如下所示(此处使用的是 Docker Toolbox 在Windows上安装Docke ...

  10. 彩色点云生成mesh的纹理

    上一篇文章 https://www.cnblogs.com/lovebay/p/11423576.html ,我们使用MPA算法实现了 点云生成mesh,但仅仅实现mesh的顶点着色,为了让mesh有 ...