随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼。

在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元素成为一个类似div的元素,但是到IE上就很恶心了,它不认识就是不认识,你在html和css里添加什么它都不理你。

没什么什么问题是万能的程序猿解决不了的,其实要让IE识别一个自定义的标签(IE认为h5的标签是陌生的,不合法的),只要加一行JS代码就行了:

document.createElement("这里写标签名");

  这条语句可以理解为:我要创建一个新标签,IE你别再说你不认识了!

很简单不是吗?但是h5的标签有很多,手工一个个创建耗时不说,还可能写错或者漏掉,到时候出了BUG又是无从下手了,所以,在这里推荐两款专门为了h5标签兼容IE所开发的插件,你只需要引入它,不需要做多余的事:

  1. Bsie(鄙视IE),这个名字很有趣,其实看完它的源码后会发现,它就是帮我们把所有的h5标签都创建了一遍,免去了我们手工创建的时间。
  2. html5shiv:和上面的插件功能一样,感觉身边的朋友用这个的比较多,自己做项目的时候也是用的这个,看完它的源码会发现一个小细节,它会帮我们把不是h5标签里的自定义标签也创建一次,这意味着我们在创建一个自定义标签的时候,不用考虑这个标签会不会生效了,真是贴体入微。

  下面附上以上两款插件的Github地址:

  Bsie——Github链接

  html5shiv——Github链接


  如果觉得这篇文章能给你带来帮助,请进入我的Github点个星星,(づ ̄ 3 ̄)づ么么哒。

html5标签兼容低版本浏览器的更多相关文章

  1. Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  2. 使用html5兼容低版本浏览器

    因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...

  3. React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...

  4. webpack 兼容低版本浏览器,转换ES6 ES7语法

    ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...

  5. 使用新标签兼容低版本IE

    HTML语义化 意义:根据内容的结构化(语义化),选择合适的标签,便于开发者阅读和写出更优雅的代码,同时让流浪器的爬虫和机器更好的解析. 尽可能少的使用无语义的标签 div 和 span 在语义不明显 ...

  6. WebSocket解释及如何兼容低版本浏览器

    WebSocket类似HTTP 协议,是为了弥补HTTP 协议的缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息. WebSocket 协议在2008年诞生,2011年成为国 ...

  7. getElementsByClassName兼容低版本浏览器

    var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ ...

  8. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

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

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

随机推荐

  1. CAN总线位仲裁技术

    CAN总线位仲裁技术 只要总线空闲,任何单元都可以开始发送报文. 要对数据进行实时处理,就必须将数据快速传送,这就要求数据的物理传输通路有较高的速度.在几个站同时需要发送数据时,要求快速地进行总线分配 ...

  2. 使用Spring和Tomcat发布CXF REST WebService

    与发布SOAP WS一样, 同样需要在web.xml文件中配置CXFServlet: <!--cxf的Servlet--> <servlet> <servlet-name ...

  3. PHP函数(三)-递归函数

    递归函数就是函数本身在内部调用自己 <?php function DiGui($n){ echo $n."  "; if($n>0) DiGui($n-1); else ...

  4. Linux性能监测:内存篇

    在操作系统里,虚拟内存被分成页,在 x86 系统上每个页大小是 4KB.Linux 内核读写虚拟内存是以 “页” 为单位操作的,把内存转移到硬盘交换空间(SWAP)和从交换空间读取到内存的时候都是按页 ...

  5. js中的class

    js中的class 类写法 class SuperClass { constructor(option) { this.a = option; } fn() { console.log(this.b) ...

  6. 一个电脑同时运行 64bit 和 32bit 的eclipse 如何匹配 jdk环境

    一个电脑同时运行 64bit 和 32bit   的  eclipse 如何匹配 jdk环境 1 eclipse 分 64bit 和 32bit 两种.  64bit的eclipse 只能搭配 64b ...

  7. CNN感受野计算

    无痛理解CNN中的感受野receptive field CNN中感受野的计算 从直观上讲,感受野就是视觉感受区域的大小.在卷积神经网络中,感受野的定义是决定某一层输出结果中一个元素所对应的输入层的区域 ...

  8. 编译错误error:&nbsp;invalid&amp;nbsp…

    昨天遇到一个莫名其妙的编译错误,以前没有见过,而且代码流程看起来也没有太多的奇异之处.后来忍无可忍,百度了下,发现别人也有遇到这个错误的,他的解决方法是:少了"}". 嘿嘿,我开始 ...

  9. 使用alias让命令行更便捷

    在linux命令行上调试程序,经常是这样子做: $ ps x | grep sceneserver pts/ S+ : grep sceneserver ? Ssl : ./sceneserver/s ...

  10. webmagic使用

    webmagic是Java语言用于爬虫的工具.官网地址:http://webmagic.io/,中文文档地址:http://webmagic.io/docs/zh/ 使用webmagic有3种配置需要 ...