兼容解决

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. codevs1033 蚯蚓的游戏问题 裸最小费用最大流,注意要拆点

    因为蚯蚓走过的路径不能重合,所以把每个点拆成两个点,容量赋为1,保证不会走过相同的点,再加超级源点(程序中为1)和一个辅助点(程序中为2)容量赋为k来控制蚯蚓的数量,最后汇集到一个超级汇点上.做一遍最 ...

  2. JZYZOJ1371 青蛙的约会 扩展欧几里得 GTMD数论

    http://172.20.6.3/Problem_Show.asp?id=1371 题意是两个青蛙朝同一个方向跳 http://www.cnblogs.com/jackge/archive/2013 ...

  3. AtCoder - 4162 Independence

    Problem Statement In the State of Takahashi in AtCoderian Federation, there are N cities, numbered 1 ...

  4. 【最大流FF模板】HDU1532&POJ1273

    参照<挑战程序设计竞赛> #include<iostream> #include<cstdio> #include<cstdlib> #include& ...

  5. 添加HP消息队列

    Date: 20140210 Auth: Jin 两台服务器 120 HTTPSQS 236 HTTPPROXY 1.add host $ jump 120 #vim /etc/hosts 192.1 ...

  6. HDU 1864 Brave Game 【组合游戏,SG函数】

    简单取石子游戏,SG函数的简单应用. 有时间将Nim和.SG函数总结一下……暂且搁置. #include <cstdio> #include <cstring> #define ...

  7. ArcGIS10.1发布WFS-T服务

    官方帮助文档:http://resources.arcgis.com/zh-cn/help/main/10.1/index.html#/na/0154000003m3000000/ 本文介绍了如何使用 ...

  8. material design动画

    这是一篇material design 文档动画部分的学习! Summary: Material Design动画交互 动画速度的3个原则 3种交互方式 如何设计有意义的动画 使人高兴的动画细节 1 ...

  9. 【Tomcat】Tomcat闪退的问题解决/Tomcat修改端口号无效

    一.  Tomcat闪退的问题解决 1.首先 确定JDK的环境变量配置正确 2.下载纯净的新的Tomcat 3.在bin\startup.bat文件中的第一行前面加入: SET JAVA_HOME = ...

  10. Unity3D 避免玩家作弊

    如果你的Unity项目快上线了,我强烈建议你看一下Anti-Cheat这个插件.因为IOS和Android分别越狱和Root后玩家可以使用 @八门神器 @烧饼修改器 等一些列作弊的软件来修改游戏内存, ...