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版) ...
随机推荐
- [BZOJ1860][ZJOI2006]Mahjong(DP)
1860: [Zjoi2006]Mahjong麻将 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 412 Solved: 248[Submit][Sta ...
- cream 的qsqrt 及其原理
首先,是creamk 的qsort: float Q_rsqrt( float number ) { long i; float x2, y; const float threehalfs = 1.5 ...
- [xsy2282]cake
题意:一个$n\times n$的有标号点阵,现在用一条直线把它们分成两部分,问有多少种不同的分法 结论:方案数就是以点阵上的点为端点且不经过第三个点的线段数 对一个满足要求的线段,将其绕中点顺时针转 ...
- 【动态规划+二分查找】POJ2533&POJ1631最长上升子序列(LIS)
POJ2533裸的LIS,时间复杂度为O(n^2) #include<iostream> #include<cstdio> using namespace std; +; in ...
- 忘记原来的myql的root的密码;
修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...
- CDOJ 1280 772002画马尾 每周一题 div1 矩阵快速幂 中二版
"问题:众所周知772002很喜欢马尾,所以他决定画几幅马尾送给他的女朋友. 772002会画m种马尾,772002还有n张纸,n张纸分别编号1到n,每张纸上只能画一种马尾. 然而77200 ...
- HDU 4642 Fliping game (2013多校4 1011 简单博弈)
Fliping game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- OC @class关键字
1.引用一个类的两种办法 @class:如果你只是定义成员变量.属性 #import:如果是继承某个类 2.两种方法的区别 #import方式会包含被引用类的所有信息,包括被引用类的变量和方法: ...
- Openshift初步学习问题集
1.设置资源限额 详细参考 https://docs.openshift.com/enterprise/3.2/admin_guide/quota.html#sample-resource-quota ...
- Linq:Group By用法
1.简单形式: var q =from p in db.Products group p by p.CategoryID into g select g; 语句描述:使用Group By按Catego ...