貌似以前与大家分享过此类问题,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手工把它们转为块状元素方便布局
/*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标签设计的界面。
相关推荐
解决css3圆角特性不兼容ie6,ie7,ie8等问题,让ie9一下版本完美兼容css3圆角。实现非常简单
支持IE页面输入框圆角,完美解决。记得阅读里面的文档帮助
CSS3完美支持IE圆角阴影样式.zip
纯CSS3实现一款漂亮的表格效果,具有圆角、渐变、多背景色的特点,最初是在国外网站发现的,自己模拟出来了,不兼容IE8,在IE9/火狐/Chrome以及Safari下完美表现,具体效果请参见演示截图。
一共4个demo,其中 1,demo-CSS只是普通的样式,没有实现ie6透明, 2,js-png通过js文件(unitpngfix)实现了透明,但是ie6...4,最后,demo-DD,此方法完美解决,不过需要在设置png背景的div上添加class=“png”的类。
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有: 定义页面或区段的头部; 定义页面或区段的尾部...
table表格完美指定固定行列方法,可以按照自己的需要定制自己的锁定列,只需要传入简单的几个参数即可,看完你会谢我的!如果不好使用的话可以联系我,我可以指导你们。测试过兼容的浏览器有谷歌,火狐,IE11!
纯CSS开发框架,基于HTML5 CSS3 完美兼容个版本的Designers Site Program 全站静态系统 无任何的Javascript效果代码参与到框架开发中 模块: 基础框架 (Base) *必须* 样式叠加 (Base) *通用* 内容...
前段时间在工作中正好需要这个功能,但是找了很多都不能完美的实现,所以在此就自己做了一个固定表头的方法,主要用到了css3中的translate和一小段js代码,下面来一起看看吧。 效果如下: 感觉是不是很和谐,而且...
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!...
3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本...
8.1.1 对CSS支持的界面变化 8.1.2 可视CSS辅助功能 8.1.3 浏览器检查及验证标记 8.1.4 创建CSS布局页面 8.2 Dreamweaver CS3的CSS管理 8.3 CSS代码调试 8.3.1 安装Firefox Web Developer 8.3.2 界面总览 8.3.3 主要...
第一种方法:纯CSS 目前网上有的比较多的是这种解决方案(纯CSS...还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD X
因模板使用HTML5+CSS3,所以在不支持HTML5的浏览器上不兼容, 主流浏览器,如谷歌,火狐,opera,safari 等HTML5浏览器上完美兼容, 不兼容的浏览器主要为IE9版本以下。 用户收藏,个人空间,搜索页优化结果为...
html5 火焰动画,看上去很逼真的HTML5动画特效,在IE11下也完美运行,同时支持火狐、Opera、Chrome、傲游、世界之窗等浏览器,测试效果如截图所示,基于HTML5 Canvas动态生成的动画效果,是学习CSS3技术的绝佳范例。
原创设计、手工书写DIV+CSS,完美兼容IE7+、Firefox、Chrome、360浏览器等;主流浏览器; 页面简洁简单,容易管理,DEDE内核都可以使用;附带测试数据! 1.织梦内核支持,含有筛选搜索,tag标签,网站地图利于优化...
内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),追求完美的用户上传体验。 Word完美支持 实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化...
完美兼容IE7+、Firefox、Chrome、360浏览器等、主流浏览器。 页面简洁简单,容易管理,DEDE内核都可以使用,附带测试数据。 源码特点: 1、网站手工DIV+css,代码精简,首页排版整洁大方、布局合理、利于SEO、...
IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。...还有一种情况,在IE8下只有不使用兼容模式页面才能显示正常,但是如果设定为IE8的模式,在IE9中却会导致CSS3失效。看来,需要针对 IE8、IE9
摘要:脚本资源,CSS特效,CSS图片阴影 这是一个纯粹的CSS3效果,模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果,不过经测试貌似不兼容IE8,但完美支持ie9、chrome、safari、firefox、opera、360等...