浏览器对语义元素的支持情况

如今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网页如何让所有的浏览器都能识别语义元素标签样式的更多相关文章

  1. 让所有的浏览器都能识别HTML5标签样式的小插件

    如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的 ...

  2. HTML5学习笔记（三）：标识文本的语义元素

    1.<time>元素:标注日期和时间 日期格式:YYYY-MM-DD,如2016-04-13: 时间格式(24小时制):HH-MM,如15:31: 最后,组合以上规则就可以制定具体的日期和 ...

  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  4. 让360双核浏览器默认极速模式，避免采用IE模式无法正常访问html5网页的解决办法

    让360双核浏览器默认极速模式,避免采用IE模式无法正常访问html5网页的解决办法 用Meta标签代码让360双核浏览器默认极速模式不是兼容模式<meta name="rendere ...

  5. 一次完整的HTTP事务的过程、从输入URL到网页展示，浏览器都经历了什么？

    详细介绍:老生常谈-从输入url到页面展示到底发生了什么 (1)一次完整的HTTP事务的过程 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务 ...

  6. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  7. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  8. HTML5网页制作教程:HTML5块级链接

    网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

随机推荐

  1. python学习第三天-元组、列表及字典

    元组 # 元组() 关键字:tuple# 元组的值一旦确定,不可更改,包括增.删.改都不行# 1.元组只有一个数据时,加逗号在后面,不然就不是元组类型的数据tuple_1 = ("hello ...

  2. mac bash上显示git分支与状态

    主要实现 显示当前路径 显示当前所在分支 显示当前修改状态 = 表示一个干净的分支 ~ 表示文件有改动 # 表示已commit 但未 push 通过网上搜索和自己根据实际需要修改的代码如下: .bas ...

  3. java 多线程 线程安全及非线程安全的集合对象

    一.概念: 线程安全:就是当多线程访问时,采用了加锁的机制:即当一个线程访问该类的某个数据时,会对这个数据进行保护,其他线程不能对其访问,直到该线程读取完之后,其他线程才可以使用.防止出现数据不一致或 ...

  4. C++ 虚函数和多重继承的内存布局初探

    C++ 对象的内存布局 一切以事实说话: 代码: 1: #include <stdio.h> 2:  3: class A { 4: public: 5: int a; 6: int b; ...

  5. translation of 《deep learning》 Chapter 1 Introduction

    原文: http://www.deeplearningbook.org/contents/intro.html Inventors have long dreamed of creating mach ...

  6. DVR和NVR的区别(深度好文)(转)

    DVR接模拟摄像机,NVR是接IP camera的录像机. DVR的录像效果取决于摄像机与DVR本身的压缩算法与芯片处理能力,而NVR的录像效果则主要取决于IPcamera,因为IPcamera输出的 ...

  7. jquery 实现复选框选择效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  8. (urls.E006) The MEDIA_URL setting must end with a slash. （urls.e006）

    这个错误是会害死人的!   repath 的使用 setting的配置:在末尾要加一个斜杠 models urls的配置

  9. 深入了解 Flink 网络栈（二）：监控、指标和处理背压

    在之前的文章中,我们从高级抽象到底层细节各个层面全面介绍了 Flink 网络栈的工作机制.作为这一系列的第二篇文章,本文将在第一篇的基础上更进一步,主要探讨如何监视与网络相关的指标,从而识别背压等因素 ...

  10. 【Flutter学习】可滚动组件之SingleChildScrollView

    一,概述 SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子Widget.定义如下: 二,构造函数 const SingleChildScroll ...