解决ie8下h5元素兼容性的问题
2024-08-26 17:14:58
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。
HTML5的新标签元素有:
- <header>定义页面或区段的头部;
- <footer>定义页面或区段的尾部;
- <nav>定义页面或区段的导航区域;
- <section>页面的逻辑区域或内容组合;
- <article>定义正文或一篇完整的内容;
- <aside>定义补充或相关内容;
方式一: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]-->
第二种方法:使用Google的html5shiv包(推荐)
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
但是不管使用以上哪种方法,都要初始化新标签的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]-->
最新文章
- JQuery 快速入门
- 大话JSON之Gson解析JSON
- ahjesus配置vsftpd虚拟用户在Ubuntu
- python走起之第四话
- C8051 PCA实现红外遥控接收
- JavaScript“尽快失败”的原则
- esayui-datagrid的使用
- Linux下文件的权限
- nyoj 891 找点
- ORACLE控制文件一致性【weber出品】
- 使用 hibernate 存取大对象数据类型(clob和blob)
- VC++6.0中各种文件的作用
- Nginx-http_proxy_module模块
- 转://云和恩墨的两道Oracle面试题
- webpack+vue+es6+postcss
- linux部分常见指令
- HTML:<;input type=";text";>;文本框不可编辑的方式
- (4opencv)如何基于GOCW,创建一个实时视频程序
- Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC 配置校验器
- jquery开发的数字相加游戏(你能玩几分)
热门文章
- node.js在windows下的学习笔记(6)---安装Express
- Delphi静态加载DLL和动态加载DLL示例
- nginx+tomcat动静分离结构
- 正则化方法 exec 和match以及test
- Unescape HTML entities in Javascript Unescape HTML转成html代码
- kali linux 2.0 折腾笔记
- [转]oracle的ANYDATA数据类型
- [关于SQL]查询成绩都大于80分的学生
- [转载]删除所有的.svn文件夹
- spark向量、矩阵类型