兼容解决

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. Manacher算法总结

    部分图片转自:http://www.cnblogs.com/grandyang/p/4475985.html manacher算法(民间称马拉车算法233)是用来找字符串中的最长回文子串的,先来说一下 ...

  2. [Codeforces-div.1 55D] Beautiful numbers

    [Codeforces-div.1 55D] Beautiful numbers 试题分析 还是离散化...\(f_{i,j,k}\)表示i位,gcd为j,余数为k. #include<iost ...

  3. [BZOJ4898] [Apio2017]商旅

    [BZOJ4898] [Apio2017]商旅 传送门 试题分析 考虑两个点之间的路径,显然如果交易的话肯定选\(S_{t,i}-B_{s,i}\)最大的. 那么我们可以先用\(Cost\)把两个点的 ...

  4. 【线段树】HDU1394 - Minimum Inversion Number

    [题目大意] 给出0..n-1组成的一段数,可以移动前几个数到结尾.求出最小的逆序对个数. [思路] 先用线段树求出逆序对,方法和树状数组是一样的.然后对于当前第一个数num[0],在它之后比它小的数 ...

  5. [BZOJ1004](HNOI 2008) Cards

    Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目 前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张 ...

  6. 简单的INI解析封装

    简单封装的一个ini解析处理类(支持跨平台).支持功能: 加载并解析指定ini文件中的配置: 读取指定 section 下的指定 key 的值.提示:支持按数值型读取,或按文本类型读取:使用示例: a ...

  7. hibernate使用原生SQL查询

    以下是Demo测试Hibernate 原生SQL查询: import java.util.Iterator; import java.util.List; import java.util.Map; ...

  8. gridview展开嵌套显示

    最近实在是太忙了,好几个月没有更新博客了,近来项目需要用到GRIDVIEW嵌套的,在这里跟大家分享一下,大家如有更好的解决方案,请不吝贴出.在ASP.NET中,GridView嵌套可以显示当前选定的父 ...

  9. Linux设备文件简介

    转:http://www.360doc.com/content/11/0418/00/5087210_110410837.shtml 版权声明 本 文作者是一位自由软件爱好者,所以本文虽然不是软件,但 ...

  10. JS/JQuery判断是否移动设备+JS/JQuery判断浏览器类型

    原文:https://blog.csdn.net/Little_Stars/article/details/48624669 JS代码如下(点击事件依赖JQuery): //判断设备类型 $(&quo ...