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>

点赞

发表评论

: 北京pk10开奖结果 北京pk10开奖官网 北京赛车开奖历史 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖结果 秒速赛车开奖直播 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖结果 北京赛车pk10开奖记录 北京pk10历史开奖记录 秒速赛车开奖结果 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖直播 秒速飞艇开奖记录 秒速飞艇历史记录 秒速飞艇开奖结果 秒速飞艇开奖直播 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 pc蛋蛋预测 pc蛋蛋幸运28 北京赛车开奖结果 北京赛车开奖记录 pk10开奖结果 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 北京赛车开奖结果 北京赛车开奖记录 北京赛车历史记录 北京赛车开奖 幸运飞艇开奖记录 幸运飞艇历史记录 幸运飞艇开奖结果 幸运飞艇开奖直播