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版) ...
随机推荐
- JZYZOJ1378 [noi2002]M号机器人 欧拉函数
http://172.20.6.3/Problem_Show.asp?id=1378日常懒得看题目怪不得语文差,要好好读题目了,欧拉函数大概是数论里最友好的了,不用解方程不用转换过来转换过去只需要简单 ...
- [Codeforces-div.1 494B]Obsessive String
[CF-div.1 B]Obsessive String 题目大意 两个字符串\(S,T\),求划分方案数使得一个集合中两两划分不相交且划分都包含字符串\(T\) 试题分析 kmp先求出那个位置匹配. ...
- 【树形dp】Distance in Tree
[CF161.D] Distance in Tree time limit per test 3 seconds memory limit per test 512 megabytes A tree ...
- 【欧拉回路】【欧拉路径】【Fleury算法】CDOJ1634 记得小苹初见,两重心字罗衣
Fleury算法看这里 http://hihocoder.com/problemset/problem/1181 把每个点看成边,每个横纵坐标看成一个点,得到一个无向图. 如果新图中每个点的度都是偶数 ...
- Alpha冲刺(6/10)——追光的人
1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...
- [Git] 给git命令起别名
转载自:http://blog.csdn.net/qinjienj/article/details/7479886 程序员都是"懒惰"的,哪怕是执行一个命令的时候少敲了一个字母也感 ...
- postgres10配置huge_pages
操作系统 修改/boot/grub2/grub.cfg 定位到第一个'menuentry 'CentOS Linux',在"linux16 /vmlinuz"最后面添加 numa= ...
- PHP之is_a()函数执行代码之总结
今天看到云舒在群里贴的漏洞公告,原始的文章在 http://www.byte.nl/blog/2011/09/23/security-bug-in-is_a-function-in-php-5-3-7 ...
- Git系列一之安装管理
1.Git安装部署 Git是分布式的版本控制系统,我们只要有了一个原始Git版本仓库,就可以让其他主机克隆走这个原始版本仓库,从而使得一个Git版本仓库可以被同时分布到不同的主机之上,并且每台主机的版 ...
- Fragment与Activity传递数据
MainActivity如下: package cc.testsimplefragment0; import android.os.Bundle; import android.app.Activit ...