兼容解决

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

如何使用

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

<!--[if lte IE 8]>
<script type="text/javascript" src="./js/html5.js"></script>
<![endif]-->

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

响应式兼容方案一

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

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

使用方法

<!--[if lte IE 8]>
<script type="text/javascript" src="./js/respond.min.js"></script>
<![endif]-->

响应式兼容方案二

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

<!--[if lt IE 9]>
<script type="text/javascript" src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->

源文件下载

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

HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)的更多相关文章

  1. HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  2. html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  3. HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

    1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...

  4. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  5. HTML-HTML5+CSS3权威指南阅读(四、媒体查询)

    1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义 ...

  6. HTML-HTML5+CSS3权威指南阅读(三、CSS3)

    不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...

  7. HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)

    1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...

  8. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  9. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

随机推荐

  1. [BZOJ1860][ZJOI2006]Mahjong(DP)

    1860: [Zjoi2006]Mahjong麻将 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 412  Solved: 248[Submit][Sta ...

  2. cream 的qsqrt 及其原理

    首先,是creamk 的qsort: float Q_rsqrt( float number ) { long i; float x2, y; const float threehalfs = 1.5 ...

  3. [xsy2282]cake

    题意:一个$n\times n$的有标号点阵,现在用一条直线把它们分成两部分,问有多少种不同的分法 结论:方案数就是以点阵上的点为端点且不经过第三个点的线段数 对一个满足要求的线段,将其绕中点顺时针转 ...

  4. 【动态规划+二分查找】POJ2533&POJ1631最长上升子序列(LIS)

    POJ2533裸的LIS,时间复杂度为O(n^2) #include<iostream> #include<cstdio> using namespace std; +; in ...

  5. 忘记原来的myql的root的密码;

    修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...

  6. CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版

    "问题:众所周知772002很喜欢马尾,所以他决定画几幅马尾送给他的女朋友. 772002会画m种马尾,772002还有n张纸,n张纸分别编号1到n,每张纸上只能画一种马尾. 然而77200 ...

  7. HDU 4642 Fliping game (2013多校4 1011 简单博弈)

    Fliping game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  8. OC @class关键字

      1.引用一个类的两种办法 @class:如果你只是定义成员变量.属性 #import:如果是继承某个类 2.两种方法的区别 #import方式会包含被引用类的所有信息,包括被引用类的变量和方法: ...

  9. Openshift初步学习问题集

    1.设置资源限额 详细参考 https://docs.openshift.com/enterprise/3.2/admin_guide/quota.html#sample-resource-quota ...

  10. Linq:Group By用法

    1.简单形式: var q =from p in db.Products group p by p.CategoryID into g select g; 语句描述:使用Group By按Catego ...