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 ...
随机推荐
- 好1.1.4 PTA提交列表及说明
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 我在这个课程的目标是 这个作业在那个具体方面帮助我实现目标 概括本周的学习以及更加熟练本周的代码 参考文献 C语言程序设计 百度文献 (h ...
- intellij中maven不能导入pom文件中指定的jar包
pom文件配置依赖的jar包版本,可以有默认的版本,如下 <profiles> <profile> <id>default_version</id> & ...
- C++中的智能指针类模板
1,智能指针本质上是一个对象,这个对象可以像原生的指针一样使用,因为智能指 针相关的类通过重载的技术将指针相关的操作符都进行了重载,所以智能指针对象可以像原生指针一样操作,今天学习智能指针类模板,通过 ...
- [心得]Ubuntu無法ssh登入
裝好ssh後,發覺無法用root登入,可是sshd_config接正確. 後來發現原因在於,Ubuntu沒有root帳號,但是可以透過sudo -s拿到root權限. su root 密碼怎樣打也行不 ...
- 超強的Linux指令解釋網站《explainshell.com》，學Linux必備！
ExplainShell 官方網站:http://explainshell.com/ 原始碼下載:https://github.com/idank/explainshell 用瀏覽器打該explain ...
- HDU 5159 Card( 计数 期望 )
Card Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- MYSQL中常用的工具
1.mysql(客户端链接工具): -u :指定用户名 -p:指定密码 -h:指定服务器ip或者域名 -P(大写):指定端口 例子:mysql -u root -h 202.194. ...
- MATLAB之画确定区域内互不接触的球
MATLAB之画确定区域内互不接触的球 程序要求:在确定区域内,画互不接触的球 输入:球的个数N,半径D,两球之间的最小距离K倍(D的倍数) 输出:各圆心的三维坐标,并作图显示 程序: functio ...
- 【问题解决方案】git/github本地和远程仓库的重命名
参考: CSDN博文:在Github上重命名仓库 背景: 偶然终于看到一条规范里写着: "通常(注意是通常,尤其是 Web 相关的项目) repo 的命名用小写英文,多个字母之间用连字符(比 ...
- 十五、API请求接口-远程服务器返回错误: (400) 错误的请求错误
一.远程服务器返回错误: (400) 错误的请求错误 捕获异常查看具体错误 using Newtonsoft.Json; using System; using System.Collections. ...