兼容解决

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. 【hdu1280】前M大的数

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. 【计算几何】CDOJ1720 几何几何

    #include<cstdio> #include<algorithm> #include<cmath> using namespace std; #define ...

  3. 【bitset】【推导】hdu5961 传递

    <法一>http://blog.csdn.net/u014325920/article/details/53046890 1.判断传递的条件为:若G中有 一条边从a到b且有一条边从b到c ...

  4. Problem C: 指针:有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面m个数

    #include<stdio.h> int move(int *x,int n,int m) { ]; int i; //int *p;指针循环变量p ;i<n;i++) t[i]= ...

  5. [转]spring tx:advice 和 aop:config 配置事务

      <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www. ...

  6. redis(一)Windows下安装redis服务、搭建redis主从复制

    接下来会写一个redis实战系列,在此记录,有什么问题大家请随时批评. 好了,进入正题,这篇会将redis以windows服务形式提供服务(搭建一个简单的主从复制 M:6379:s:6380.6381 ...

  7. [Bug]The test form is only available for requests from the local machine.

    引言 当您尝试从远程计算机访问 Web 服务时,不会显示“调用”按钮.并且,您会收到以下错误信息: The test form is only available for requests from ...

  8. nginx实现简单负载均衡

    配置文件 主文件: /etc/nginx/nginx.config 例当前在22.22.22.4服务器 //同时开另外三个服务器 可以在http{} 里添加 include /etc/nginx/si ...

  9. OpenShift应用镜像构建(1) S2I tomcat 镜像定制

    参考并感谢https://www.jianshu.com/p/fd3e62263046 在对接项目制作应用镜像的过程中,经常发现避免不了的是需要写Dockerfile,(当然另外一种方式是直接run一 ...

  10. mysql: Error Codes and Messages

    Appendix B. Error Codes and MessagesTable of Contents B.1. Server Error Codes and MessagesB.2. Clien ...