轩枫阁

首页 / Web前端 / CSS / 让IE支持HTML5标签及对CSS3 Media Query的兼容

让IE支持HTML5标签及对CSS3 Media Query的兼容

前言

HTML5新增了很多语义化的标签,赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现,就需要使用CSS3多媒体查询Media Query做成响应式的。

HTML5标签兼容方案

使用HTML5标记的优势

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时,也有利于SEO。

关于HTML5结构

文章一:http://imsole.net/html5/ele.html

文章二:http://www.xuanfengge.com/html5-structure.html

兼容解决

HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢?在高级浏览器能使用上这些标签,增强语义化;而在低级浏览器(包括IE6)上表现不会出错。那就需要引入html5.js这个文件。

如何使用

既然是只有IE低版本需要使用,那就需要做个判断。

需要注意的地方是,这段代码需要添加在head标签内,而不是最后写在前面即底部,因为IE浏览器必须在元素解析签知道这些元素。

响应式兼容方案一

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

这样子,IE6-8也能良好的展现,支持在浏览器中使用CSS3媒体查询功能.

使用方法

响应式兼容方案二

IE8 或者更低的版本不支持 CSS3 媒体查询,但通过添加脚本 css3-mediaqueries.js 来实现这一功能

 源文件下载

html5.js:http://xuanfengge.com/demo/201403/fuck-IE/html5.js

respond.min.js:http://www.xuanfengge.com/demo/201403/fuck-IE/respond.min.js

233/456
235/456

相关文章

文章评论

  • 希望大家发表自己的看法!我先赞成一下

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]