网站首页 > 教程文章 正文
使用语义化代码更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。
方式一:Coding JavaScript
<!--[if lt IE 9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。
方法二:使用Google的html5shiv包(推荐)
<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。
不管使用以上哪种方法,都要初始化新标签的CSS。因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
如果IE6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?
我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
<!--[if lte IE 8]>
<noscript>
<style>
.html5-wrappers{display:none!important;}
</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="#">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->
这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。
猜你喜欢
- 2024-12-27 盘点15个优秀的甘特图开源项目 甘特图开发
- 2024-12-27 vue深坑记-keep-alive 路由缓存和清除
- 2024-12-27 1-html基本知识 html基本概念
- 2024-12-27 HTML5入门 HTML5入门 标签
- 2024-12-27 (一)熟练HTML5+CSS3,每天复习一遍
- 2024-12-27 MVVM模式解析和在WPF中的实现(二)
- 2024-12-27 网页设计HTML零基础入门 html5网页设计教程
- 2024-12-27 python实现爬取豆瓣电影Top250 python爬虫豆瓣
- 2024-12-27 DOM破坏攻击学习 ddos攻击破坏了信息什么特性
- 2024-12-27 手把手教你Vue解析pdf(base64)转图片【实践】
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- md5 sha1 (32)
- mybatis plus page (35)
- semaphore 使用详解 (32)
- update from 语句 (32)
- vue @scroll (38)
- 堆栈区别 (33)
- 在线子域名爆破 (32)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)