浏览器对HTML5语义元素的支持情况_优品建站

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

  用HTML5制作网站的这些语义元素已经基本得到了所有现代浏览器的支持。就算你想找到一个不支持它们的Chrome、Firefox、Safari或Opera的版本,都不太可能。最大的绊脚石还是IE9之前的Internet Explorer,包括仍然占很大比例的IE8。
  幸运的是,语义元素还是一个比较容易弥补的功能。毕竟,语义元素本身什么也不做,要支持它们,只要让浏览器把它们当做普通的<div>元素就行了。为此,我们要做的就是像接下来几节所说的,为它们添加点样式规则。之后就可以得到超级可靠的语义元素,即使用10年前的老古董浏览器来看,也不是问题了。
  注意 如果你使用了Modernizr(见1.6.7节),那你的页面会自动完成语义元素的修补工作。那么接下来几节的内容你就可以不看了。如果你没有使用Modernizr,或者你很想知道怎么完成修补工作,那请继续阅读。
一.为语义元素添加样式
  浏览器在遇到不认识的元素时,会把它们当成内联(inline)元素。大多数HTML5语义元素(包括本章已经介绍的这些,但除<time>之外)都是块级元素,也就是需要在单独一行上来呈现它们,同时在它们与前后元素之间各添加一些空间。
  不认识HTML5语义元素的浏览器不知道应该把它们显示为块级元素,所以很可能会把它们都挤到一起。为解决这个问题,只要在样式表中添加一条“超级规则”即可。下面就是一条为9个HTML5元素应用块级显示格式的规则:

article, aside, figure, figcaption, footer, header, main, nav, section,
summary {
  display: block;
}
  这条规则对于能够识别HTML5元素的浏览器没有作用,因为它们的display属性已经被默认设成了block。而且这条规则也不影响我们已经为这些元素应用的样式。那些样式照样可以添加到它们身上。
二.使用HTML5“垫片”
  对于大多数浏览器而言,上一节介绍的技术可以解决兼容问题。但这里的“大多数”并不包括IE8及更早的版本。换句话说,对于较早版本的IE,还要面临一个挑战:它们会拒绝给无法识别的元素应用样式。好在,有一个变通方案:通过JavaScript创建新元素,就可以骗过IE,让它识别外来元素。比如,下面的脚本可以让IE识别并为<header>元素应用样式:

<script>
  document.createElement('header')
</script>
  实际上,你不用自己亲手写这些代码,因为已经有人为你写好了,只要拿过来用就可以了。要使用这个脚本,只要在页面的<head>区块中引用它即可,就像这样:

<head>
  <title>...</title>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  ...
<head>
  这行代码会从html5shim.googlecode.com这个Web服务器上取得脚本,然后在浏览器处理页面其余部分之前运行。这个脚本使用前面描述的JavaScript代码创建所有的新HTML5元素,然后还会为它们动态应用上一节提到的样式,确保新元素能正确地显示为块元素。现在,剩下的事儿就是使用这些元素,并为它们应用你自己的样式。
  对了,刚才忘说了,前面的html5.js脚本应该是有条件执行的——只在你使用旧版本Internet Explorer的情况下才会执行。为了避免不必要地加载JavaScript文件,可以像下面这样把引用脚本的代码放在IE的条件注释中:

<! --[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]-->
  这样,其他浏览器(IE9及更高版本)就会忽略这行脚本,为你的页面节省数毫秒的加载时间。
  提示 前面的例子直接使用了来自谷歌代码托管站点的垫片脚本。你也可以把它下载下来,地址为http://tinyurl.com/the-shiv。下载后放到本地目录里,改一下页面中引用这个脚本的地址即可。最后,还要提醒你,如果你是在本地计算机上测试网页(而不是上传到服务器), Internet Explorer会自动将页面置为受限模式。意思就是,你会在页面顶部看到臭名昭著的IE安全提示条,告诉你Internet Explorer已经禁用了其中的所有脚本,包括HTML5垫片脚本。要想正常测试,必须单击该安全提示条,选择允许活动的内容。
  如果你把页面上传到网站中,就没有这个问题了,不过这无疑会增加测试的工作量。解决方案呢?就是在页面开头添加“Web标志”,详见1.3.5节。
三.Modernizr:一站式解决方案
  要解决为语义元素应用样式的问题,还有一个方案:使用Modernizr(参见1.6.7节)。Modernizr内置了HTML5垫片脚本,因此会自动替你解决上述问题,不用你再使用html5.js或者添加什么样式规则了。因此,如果你已经在用Modernizr检测功能了,那么要考虑的就只有怎么使用语义元素了。

  • 浏览器对HTML属性的支持
    对于HTML开发设计人员来讲,浏览器的兼容性是一个复杂又不可回避的问题。随着技术的进步,目前市面上的主流浏览器对HTML的支持已经很完善了,不像早期浏览器的兼容性那样,让开发设计人员伤透了脑筋。
  • 主流浏览器对CSS3支持状况
    CSS3特性大部分都已经有了很好的浏览器支持度(后面在讲每个CSS3特性之时,会列出各浏览器对其支持情况)。
  • 网站制作报价单模板适用多个行业(最新版)
    网站制作报价免费模板下载,可以应用于多个行业,也可以根据客户需求进行定制,内容详细,报价清晰明确,直接复制即可使用。
  • bootstrap网站制作案例实训——开发电商网站特效
    本案例使用Bootstrap进行网站制作的网格系统进行布局,其中设置了一些电商网站经常出现的动画效果。
  • 网站制作报价预算的明细报表下载,免费使用
    本文为大家提供网站制作报价预算的明细报表,内容包括网站制作原报价价格、根据客户要求进行修改、网站制作调整后报价,免费下载。
  • bootstrap被删除的Glyphicons字体图标
    本文单独介绍一下Bootstrap框架中的Glyphicons字体图标组件。Glyphicons字体图标指的是Glyphicon Halflings字体图标。我们在使用Glyphicons Halflings字体图标时一般是需要付费的,不过Glyphicons Halflings字体图标拥有者对Bootstrap授权可以免费使用。
  • 苏州网站制作报价,苏州网站建设价格
    苏州网站建立几钱,苏州网站制造的价钱规范,真的很重要、很迫切需求吗?当你散步市场时,你发现同一件商品在每一个摊位的报价都不同时,你能否在犹疑?这时你就是客户,你弄不分明终究花几钱购置该商品才是最合算,由于该市场没有标准。
  • Three.js网站开发指南:在单几何体上使用多种材质
    在创建THREE.Mesh时,到目前为止,我们已经使用过一种材质。为几何体的每个面指定不同的材质是可能的。
  • 网站制作报价明细模板免费下载
    本文详细介绍网站设计的报价,网站内容的报价,网站功能模块的报价,网站报价的注意事项。
  • html网页制作如何使用<audio>标签播放音频
    本文教大家如何使用<audio>标签播放音频,此功能在网站制作中应用非常广泛,代码简单移动,正文附带源码供大家学习参考。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC