HTML5网页如何让所有的浏览器都能识别语义元素标签样式
浏览器对语义元素的支持情况
如今HTML5愈来愈引发大家的关注了，但目前支持HTML5的浏览器还不是主流，特别是国内用户近50%以上仍旧使用IE6，由于支持HTML5的IE9不支持Xp系统安装，这样未来很长一段时间，HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多，其中自己生成标签元素就是一种。
为了让浏览器能识别html新标签并显示对应样式的效果有几种不同的办法：
一、不认识html5语义元素的浏览器不知道因为怎样把它们显示成块级元素，所以会把它们挤到一起。未解决这个问题，只要在样式表中添加一条超级规则即可。
article,aside,figure,figcaption,footer,header,hgroup,nav,section,
summary {
dispaly:blok;
}
PS：对于大多数浏览器，第一种技术可以解决问题。但这里的大多数并不包括IE8以及更早的版本。换句话说，对于较早版本的IE，还要面临一个挑 战：他们会拒绝给无法识别的元素应用样式。好在有一个可以变通方案：通过JavaScript创建新元素，可以骗过IE，让它来识别外来元素，比如，下面 的方法
二、脚本可以让IE识别并为<header>元素应用样式：
<script>
document.createElement('header')
</script>
三、实际上，你不用亲自写这些代码，只要在<header>区块中引用它即可，就像这样：
<head>
<title></title>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
...
</head>
PS:html5.js脚本应该是有条件执行的——只在你使用旧版本IE的情况下才会执行。为了避免不必要的加载js文件，可以像下面这样引用脚本代码放在IE的条件注释中
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
这样其他浏览器（IE9以及更高版本）就会忽略这行脚本，为你的页面节省毫秒的加载时间。
四、使用Modernizr，Modernizr会自动替你解决上述问题，不用使用html5.js或者样式规则。
1、打开www.modernizr.com，找到 Download Modernizr 区域，单击其中的Development按钮，下载Modernizr的js文件。
2、把下载到的js文件放到你的网页所在文件夹，例如js文件夹。
3、在页面<head>区块中添加对这个js文件的引用。
示例：
<head>
<meta charset="utf-8">
<title>Html5</title>
<!--[if lt IE 9]>
<script src="/skin/blog/js/modernizr.js"></script>
<![endif]-->
...
</head>
HTML5网页如何让所有的浏览器都能识别语义元素标签样式的更多相关文章
- 让所有的浏览器都能识别HTML5标签样式的小插件
如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的 ...
- HTML5学习笔记（三）：标识文本的语义元素
1.<time>元素:标注日期和时间 日期格式:YYYY-MM-DD,如2016-04-13: 时间格式(24小时制):HH-MM,如15:31: 最后,组合以上规则就可以制定具体的日期和 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- 让360双核浏览器默认极速模式，避免采用IE模式无法正常访问html5网页的解决办法
让360双核浏览器默认极速模式,避免采用IE模式无法正常访问html5网页的解决办法 用Meta标签代码让360双核浏览器默认极速模式不是兼容模式<meta name="rendere ...
- 一次完整的HTTP事务的过程、从输入URL到网页展示，浏览器都经历了什么？
详细介绍:老生常谈-从输入url到页面展示到底发生了什么 (1)一次完整的HTTP事务的过程 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务 ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- HTML5网页制作教程:HTML5块级链接
网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集
在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
随机推荐
- Prim算法生成迷宫
初始化地图 function initMaze(r,c){ let row = new Array(2 * r + 1) for(let i = 0; i < row.length; i++){ ...
- mysql for Mac 下创建数据表中文显示为？的解决方法
在我的绝版Mac mini下安装了mysql 5.7版本,实例中,在通过load data 导入数据时发现表中的中文显示为 ? 通过百度,发现多个版本的解决方法,将其中一个成功解决的方法贴上来: 大 ...
- 多线性方程组迭代算法——Gauss-Seidel迭代算法的Python实现
多线性方程组(张量)迭代算法的原理请看这里:原理部分请留言,不方便公开分享 Jacobi迭代算法里有详细注释:多线性方程组迭代算法——Jacobi迭代算法的Python实现 import numpy ...
- $vim$配置以及$linux$
vim的配置 1 set nu "设置行标号 2 set tabstop=4 "这一条以及以下三条都把缩进设为4 3 set shiftwidth=4 4 set softtabs ...
- sublime中使用插件anaconda而在代码中出现方框
这个标志是说不符合PEP8标准,比如使用了Tab做缩进:一行过长等问题. 可以在可以在 Sublime > Preferences > Package Settings > Anac ...
- Docker 清理容器 log 日志
原文 Docker 清理容器 log 日志 docker logs <容器ID> 是常用命令,来查看容器运行日志,但时间长了之后,就会发现越来越慢,log 太多了,这时就需要清理一下. 先 ...
- PHP导出带有emoji表情的文本到excel文件出问题了
前段时间做了一个导出用户信息(包含微信昵称)到excel文件的功能,一直没问题,今天突然有人反馈说导出来的数据有一些丢失了.我试了一下,发现有些数据导出没问题,有些有问题,某些列出现了空白,数据打印出 ...
- 从vue的组件传值着手浅谈观察者模式
首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...
- docker学习---搭建Docker私有库及删除库内镜像
环境准备系统: cat /etc/redhat-release CentOS Linux release (Core) 主机两台,分别是docker私有库服务器(IP 192.168.121.121) ...
- python 环境变量的配置
1. 打开python安装目录 2.将python.exe重名为python3.exe 3.在环境变量的path中,添加python3的目录 4.将pip.exe的目录页添加到path中,即可完成环境 ...