您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

HTML5网页如何让所有的浏览器都能识别语义元素标签样式

胜于蓝2019-11-05【CSS3|Html5】人已围观

简介浏览器对语义元素的支持情况如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这

浏览器对语义元素的支持情况kpe胜于蓝|优秀个人博客

如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多,其中自己生成标签元素就是一种。kpe胜于蓝|优秀个人博客

为了让浏览器能识别html新标签并显示对应样式的效果有几种不同的办法:kpe胜于蓝|优秀个人博客

一、不认识html5语义元素的浏览器不知道因为怎样把它们显示成块级元素,所以会把它们挤到一起。未解决这个问题,只要在样式表中添加一条超级规则即可。kpe胜于蓝|优秀个人博客

article,aside,figure,figcaption,footer,header,hgroup,nav,section,kpe胜于蓝|优秀个人博客

summary {kpe胜于蓝|优秀个人博客

dispaly:blok;kpe胜于蓝|优秀个人博客

}kpe胜于蓝|优秀个人博客

PS:对于大多数浏览器,第一种技术可以解决问题。但这里的大多数并不包括IE8以及更早的版本。换句话说,对于较早版本的IE,还要面临一个挑战:他们会拒绝给无法识别的元素应用样式。好在有一个可以变通方案:通过JavaScript创建新元素,可以骗过IE,让它来识别外来元素,比如,下面的方法kpe胜于蓝|优秀个人博客

二、脚本可以让IE识别并为<header>元素应用样式kpe胜于蓝|优秀个人博客

<script>kpe胜于蓝|优秀个人博客

 document.createElement('header')kpe胜于蓝|优秀个人博客

</script>kpe胜于蓝|优秀个人博客

三、实际上,你不用亲自写这些代码,只要在<header>区块中引用它即可,就像这样:kpe胜于蓝|优秀个人博客

<head>kpe胜于蓝|优秀个人博客

 <title></title>kpe胜于蓝|优秀个人博客

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>kpe胜于蓝|优秀个人博客

...kpe胜于蓝|优秀个人博客

</head>kpe胜于蓝|优秀个人博客

PS:html5.js脚本应该是有条件执行的——只在你使用旧版本IE的情况下才会执行。为了避免不必要的加载js文件,可以像下面这样引用脚本代码放在IE的条件注释中kpe胜于蓝|优秀个人博客

  <!--[if lt IE 9]>kpe胜于蓝|优秀个人博客

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>kpe胜于蓝|优秀个人博客

  <![endif]-->kpe胜于蓝|优秀个人博客

这样其他浏览器(IE9以及更高版本)就会忽略这行脚本,为你的页面节省毫秒的加载时间。kpe胜于蓝|优秀个人博客

四、使用Modernizr,Modernizr会自动替你解决上述问题,不用使用html5.js或者样式规则。kpe胜于蓝|优秀个人博客

1、打开www.modernizr.com,找到 Download Modernizr 区域,单击其中的Development按钮,下载Modernizr的js文件。kpe胜于蓝|优秀个人博客

2、把下载到的js文件放到你的网页所在文件夹,例如js文件夹。kpe胜于蓝|优秀个人博客

3、在页面<head>区块中添加对这个js文件的引用。kpe胜于蓝|优秀个人博客

示例:kpe胜于蓝|优秀个人博客

<head>kpe胜于蓝|优秀个人博客

 <meta charset="utf-8">kpe胜于蓝|优秀个人博客

<title>Html5</title>kpe胜于蓝|优秀个人博客

<!--[if lt IE 9]>kpe胜于蓝|优秀个人博客

<script src="/skin/blog/js/modernizr.js"></script>kpe胜于蓝|优秀个人博客

<![endif]-->kpe胜于蓝|优秀个人博客

...kpe胜于蓝|优秀个人博客

</head>kpe胜于蓝|优秀个人博客

Tags:

很赞哦! ()

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7613篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00