4当前位置:网页制作HTML教程-让IE完美支持HTML5/CSS3的方法
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·link标签media参数的含义小结
·让IE完美支持HTML5/CSS3的方法
·让网站支持老版本IE浏览器的3种解决方法
·网页头部多出一行空白甚至样式错乱等问题的分析
·HTML5大潮已袭来,HTML5曲折的发展之路
·漂亮的DIV+CSS+JQUERY网站后台模板
·HTML4和HTML5之间的10个主要不同之处
·简述html的3种列表ul、ol、dl
·适合网站后台的Popup Menu
·IE6中出现"文字自动重复"错误的原因和解决方法
4热门网页制作
·两种网页滚动字幕代码
·设置select宽度
·在网页中实现细线边框的两种方法
·HTML语法基础及规则
·滚动字幕标记(marquee)的使用
·表单提交后submit按钮变灰
·隐藏状态栏的超链接信息
·如何让浏览者记住你的网站
·隐藏网页源代码方法汇总
·制作漂亮的三维表格
4相关网页制作
·设置select宽度
·让输入框关闭自动完成(AutoComplete)功能
·如何利用HTML优化加快网页速度
·link标签media参数的含义小结
·xhtml的结构标签
·谈IFRAME标签的使用作用及技巧
·50条网页制作小技巧集锦
·META标签写法的常见错误及后果
·实现链接的虚线下划线效果
·如何开始WEB标准之路
让IE完美支持HTML5/CSS3的方法
类别:HTML教程    来源:网络    时间:2014/4/25    贴士:推荐给好友
收藏本页 8 
  貌似以前与大家分享过此类问题,HTML5/CSS3那些炫丽实用的效果,真得让人很眼谗,但悲催的IE浏览器,只有IE9才支持HTML5,这让我们很失望啊,但真的就没有一点办法了吗?其实补救方法还是有的,下面介绍的几种方法,可让客户端浏览器完美支持CSS3、HTML5。

  第一种方法:IE9以下版本的IE将创建HTML5标签,非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影响网页执行效率。
<!--[if lt IE9]>
<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手工把它们转为块状元素方便布局。
[code]/*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标签设计的界面。
·上一篇:让网站支持老版本IE浏览器的3种解决方法
·下一篇:link标签media参数的含义小结
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号