400-807-8991
奇酷学院专注于HTML5培训,欢迎您咨询本校HTML5培训班
网站首页 >HTML5培训 >HTML5教程 >如何解决低版本IE浏览器与HTML5兼容问题

如何解决低版本IE浏览器与HTML5兼容问题

来源:奇酷学院 点击量: 发表于:

HTML5作为HTML最新流行的一个版本有很多的功能特性被Web前端工程师所追捧,但国内仍有不少一部分低版本IE浏览器用户无法兼容HTML5令前端工程师十分头疼,今天就让奇酷学院来告诉大家如何有效解决低版本IE浏览器兼容HTML5问题的三种方法。

HTML5与IE浏览器兼容问题解决方法

1.htmlshiv.js

Remy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。我们可以花很多时间来思考其运行原理,但谁会在乎呢?这种策略在所有产品网站上仍然是必须使用的。

代码如下:

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

2.Selectivizr.js

是一个不可思议的资源,用于填充不支持的CSS选择器和属性,包括重要的 last-child。在最近的重设计中,我嵌入了 selectivizr,并在更老的 IE 浏览器上也不会错过任何细节。下面是我的实现代码:

代码如下:

<!--[if lte IE 8]><script src="http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->

现代项目绝对必须的。只在老版本IE时才加载。另外,Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv,我们只要引用 Moernizr.js 文件,IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等,也可以使用 CSS 对它们进行样式化。

3.件注释

下面这样最土的情况你肯定看到过。但无论丑陋与否,事实上这段代码完全按预期的方式运行:

代码如下:

  

css与IE浏览器兼容问题

上面的方法是作用于css,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的class,这样可以方便hack。然后我们在css文件中就可以这样写:

代码如下:

 .ie6 xxx {};

 .ie7 xxx {};

这是目前小编认为效率最高的方法,这个方法不需要或等待JavaScript,而且也不需要重量级的JavaScript库。你定义的styles类立即生效,还没有闪屏。

尽管IE浏览器正在迎头赶上竞争对手,新版本IE也有非常大的变化,并希望借助全新的IE重塑网络体验。但在国内旧版IE仍然是比较流行。好消息是,这些资源在所有现代浏览器上运行良好,代价也并不高!

文章标签: html5浏览器兼容

热门文章

  • Sublime如何快速生成HTML5头部信息。

    Sublime是一款强大的代码编辑软件,由于其操作简洁一直以来被很多前端工程师所喜爱。但一些刚接触Sublime码农却不知道如何使用它的快捷键,今天就让小编来介绍一下Sublime如何快速生成HTML5快【阅读全文】

    发布时间:2017-10-12 阅读量:201
  • CSS选择器有哪些类型,如何使用

    选择器是CSS的核心,从最初的元素、class id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。【阅读全文】

    发布时间:2017-10-25 阅读量:41
  • 推荐四款常用的HTML5前端开发框架

    作为一名HTML5前端开发者自然少不了要接触各类前端开发框架,今天就让奇酷学院为大家介绍四款最常用的HTML5前端开发框架,帮助大家在前端页面设计的过程中减少工作量提升效率。【阅读全文】

    发布时间:2017-10-25 阅读量:49
  • 7款非常使用的HTML5前端图表控件

    HTML5前端前端工程师在设计的页面的过程中经常会涉及到一些柱状图、折线图、饼状图的设计,今天就让小编为大家推荐7款非常实用的HTML5前端图表控件供大家开发使用。【阅读全文】

    发布时间:2017-10-26 阅读量:155

开课提醒

郑州 石家庄

郑州HTML5
开课时间离开课还有

-

石家庄HTML5
开课时间离开课还有

-

奇酷学院培训课程

猜你喜欢

HTML5工具教程

HTML5视频教程