解决ie8下h5元素兼容性的问题
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]-->
解决ie8下h5元素兼容性的问题的更多相关文章
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- 解决IE8下opacity属性失效问题
由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题. 在IE8及其更早的浏览器下,我们可以使用filter属性,来代替opacit ...
- 解决IE8下CSS3选择器 :nth-child() 不兼容的问题
1.定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型. n 可以是数字.关键词或公式. <ul> <li>1</li> ...
- 解决IE8下不兼容rgba()的解决办法
rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表 ...
- 解决IE8下VS2005,VS2008一些向导提示脚本错误问题
Some VS2005 and VS2008 Wizards Pop Up Script Error. Visual C++ team has discovered that after inst ...
- 解决ie8下页面刚出现时候的晃动问题
出现这个问题的原因的页面的高度超过一屏,这个时候需要在开始的时候给 html,body {overflow:scroll;overflow-x:hidden}; 这样就可以解决这个问题了
- 解决IE8下不支持document.getElementsByClassName的方法
在代码前面加如下代码: if (!document.getElementsByClassName) { document.getElementsByClassName = function (clas ...
- text-align 在ie7与ie8下的区别
在某元素上应用text-align:center; 在ie7下解释为,该元素内的元素和文字都居中. 在ie8下解释为,该元素内的文字居中. 例如:<div style="borde ...
- ie8下jquery改变PNG的opacity出现黑边
复制网上的,没有他们那个类型的博客,所以就直接复制了 这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明,jquery代 码:$(element).animate({"opacity& ...
随机推荐
- Rational Rose--简介
Rational Rose Rational Rose是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具.用于可视化建模和公司级水平软件应用的组件构造. 目前版本的Rational ...
- PHP内核探索之变量 图解
http://blog.csdn.net/ohmygirl/article/details/41542445 http://www.laruence.com/2008/09/19/520.html
- Android打地鼠游戏源码带道具购买的Android游戏开发
这是一款基于安卓的打地鼠游戏,界面简洁,有level模式打地鼠和无尽模式打地鼠两种游戏模式,并可以通过商店使用金币进行道具的购买,道具可以让你更容易通关:同时金币可以在游戏通关的时候获取.工程中有较为 ...
- Android_AsyncTask_json
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- famous javascript library.
https://famo.us/ THE ULTIMATE WEB PLATFORM FOR DEVELOPERS AND DESIGNERS
- windows下搭建属于自己的web服务器
这次需要记录一下我搭建web服务器的过程. 第一步,确定自己要使用的平台:这次我用的是windows2008 server版本 第二步,计划是想要纯手工的安装apache.php等.但是我们可以下载一 ...
- 不使用var定义变量和使用var的区别
最基本的var关键字是上下文的,而不采用var是全局的这就不讨论了 “不管是使用var关键字(在全局上下文)还是不使用var关键字(在任何地方),都可以声明一个变量”.这貌似一个错误的概念:任何时候, ...
- 关于egit的日常操作总结
$git fetch -p --prune -p -- remove any remote tracking branches that no longer exist remotely prune的 ...
- I2C总线协议的总结介绍
在看天翔哥的视频之后,他强调要把I2C协议好好研究一下,那么就对一些基本的通信手段是十分有帮助的..那么就来了解一下I2C总线协议的一些知识吧. I2C(Inter-Integrated Circui ...
- SharpDevelop 编译时,任务失败,因为未找到“resgen.exe”的解决方法
在git clone sprite的项目,在本地编译的时候,会出现 任务失败,因为未找到“resgen.exe”,或未安装正确的 Microsoft Windows SDK.任务正在注册表项 HKEY ...