HTML5作为HTML最新流行的一个版本有很多的功能特性被Web前端工程师所追捧,但国内仍有不少一部分低版本IE浏览器用户无法兼容HTML5令前端工程师十分头疼,今天就让奇酷学院来告诉大家如何有效解决低版本IE浏览器兼容HTML5问题的三种方法。
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]-->
是一个不可思议的资源,用于填充不支持的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 对它们进行样式化。
下面这样最土的情况你肯定看到过。但无论丑陋与否,事实上这段代码完全按预期的方式运行:
代码如下:
上面的方法是作用于css,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的class,这样可以方便hack。然后我们在css文件中就可以这样写:
代码如下:
.ie6 xxx {};
.ie7 xxx {};
这是目前小编认为效率最高的方法,这个方法不需要或等待JavaScript,而且也不需要重量级的JavaScript库。你定义的styles类立即生效,还没有闪屏。
尽管IE浏览器正在迎头赶上竞争对手,新版本IE也有非常大的变化,并希望借助全新的IE重塑网络体验。但在国内旧版IE仍然是比较流行。好消息是,这些资源在所有现代浏览器上运行良好,代价也并不高!
选择器是CSS的核心,从最初的元素、class id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。【阅读全文】
作为一名HTML5前端开发者自然少不了要接触各类前端开发框架,今天就让奇酷学院为大家介绍四款最常用的HTML5前端开发框架,帮助大家在前端页面设计的过程中减少工作量提升效率。【阅读全文】
HTML5前端工程师在设计网站页面的时候避免不了要使用一些HTML5插件来提高自己的变成效率,今天奇酷学院为大家推荐表单、提示框、垂直菜单、面包屑导航四款必备HTML5插件的设计效果及代码【阅读全文】
HTML5前端前端工程师在设计的页面的过程中经常会涉及到一些柱状图、折线图、饼状图的设计,今天就让小编为大家推荐7款非常实用的HTML5前端图表控件供大家开发使用。【阅读全文】