HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)
兼容解决
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的兼容)的更多相关文章
- HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)
一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)
1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...
- HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)
在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...
- HTML-HTML5+CSS3权威指南阅读(四、媒体查询)
1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义 ...
- HTML-HTML5+CSS3权威指南阅读(三、CSS3)
不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...
- HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)
1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...
- Html5与CSS3权威指南 百度云下载
Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
随机推荐
- [BZOJ3000]Big Number(斯特林公式)
求n!在k进制下的位数,n<=1e18 斯特林公式:$n!\approx \sqrt{2\pi n}(\frac{n}{e})^n$ 在n很大的时候有较好的精度保证. $\log_{k}n!+1 ...
- [BZOJ 3326] 数数
Link: BZOJ 3326 传送门 Solution: 明显是一道数位$dp$的题目,就是递推式复杂了点 先要求出一个数$\bar{n}$向添加一位后的$\bar{np}$的转化关系 令$res[ ...
- Maven打war包时,添加本地jar包
1.在项目根目录中新建lib文件夹,添加jar包 2.在pom.xml文件中添加dependency <dependency> <groupId>com.oracle</ ...
- [BZOJ1001](BeiJingOI 2006)狼抓兔子
Description Source: Beijing2006 [BJOI2006] 八中OJ上本题链接:http://www.lydsy.com/JudgeOnline/problem.php? ...
- [转]java框架spring中的opensessioninview有什么作用
在hibernate中使用load方法时,并未把数据真正获取时就关闭了session,当我们真正想获取数据时会迫使load加载数据,而此时 session已关闭,所以就会出现异常. 比较典型的是在MV ...
- go排序后索引
最近碰上了一个需求,要得到排序后的原索引序列. 我又不希望自己重新实现一快排出来,所以在接口上重新封装了一下. package main import ( "fmt" " ...
- NGUI自适应屏幕分辨率
unity官方承诺的新ui系统一直没有推出来,我们的UI使用的是原生的OnGUI系统,刚好UI需要改版,索性就想迁到NGUI上面来,于是看了一下NGUI源码,发现NGUI可以大大的降低DrawCall ...
- Google Chrome插件开发-Context Menus
本节主要介绍如何在Google Chrome浏览器web页面上点击右键弹出自定义菜单,即如何使用谷歌Context Menus API接口.上节已经把主要流程介绍了,这节就直接上代码,代码都是官方例子 ...
- jTemplates模板学习笔记
1.jTemplates工作方式 1)setTemplateElement:指定可处理的模板对象 2)processTemplate:对模板化的对象进行数据处理 2.语法解析 1)jTempl ...
- maven 编码GBK的不可映射字符 或者 UTF-8
要通过修改pom.xml文件,告诉maven这个项目使用UTF-8来编译. 方案一: 在pom.xml的/project/build/plugins/下的编译插件声明中加入下面的配置:<enco ...