• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 关于老版本的浏览器不兼容H5和C3的处理方法

关于老版本的浏览器不兼容H5和C3的处理方法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Firefox,webkit,html5等相关知识,匿名希望在学习及工作中可以帮助到您
这次给大家带来用关于老版本的浏览器不兼容H5和C3的处理方法,怎样让老版本浏览器支持HTML5?老版本浏览器兼容H5和C3的注意事项有哪些,下面就是实战案例,一起来看一下。

HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因为现在你也可以在IE上用到HTML5。

第一种方法:使用Google的html5shiv包(推荐)

首先你要引用下面是引用Google的html5.js文件,好处就不说了:

<!--[if IE]>   
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>   
< ![endif]-->

将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

主要是让这些html5标签成块状,像div那样。好了,简单吧,一句话概括就是:引用html5.js 使html5标签成块状

第二种方法:Coding JavaScript

<!--[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]-->

但是不管使用以上哪种方法,都要初始化新标签的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标签设计的界面。

2.让老式浏览器兼容CSS3(不完全兼容方案)

到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就 想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer,其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。

Opacity透明度

元素的透明度在IE中可以很方便的用滤镜来实现。

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

这里半透明区域
opacity: .4;

filter:alpha(opacity=40);

border-radius圆角/Box Shadow盒阴影/Text Shadow文字阴影

在IE中可以利用Vector Markup Language (VML)和javascript来实现这些效果,参见IE-CSS3,在引用了一个HTC文件后,在IE浏览器中就可以使用这三种CSS3属性了。

相信看了这些案例你已经掌握了方法,更多精彩请关注微课江湖其它相关文章!

相关阅读:

vue.js做出图书管理平台的详细步骤

bootstrap里如何统计table sum的数量

vue.js todolist如何实现

以上就是关于老版本的浏览器不兼容H5和C3的处理方法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 解决Firefox下不支持outerHTML问题代码分享
  • H5新标签浏览器的兼容问题
  • 关于老版本的浏览器不兼容H5和C3的处理方法
  • HTML5 video 实现浏览器兼容的方法
  • html5中设置或返回浏览器应当显示标准的音视频控件的属性controls
  • html5中浏览器是否能播放指定的音频/视频类型的方法canPlayType()
  • 通过手机浏览器打开APP或者跳转到下载页面的实现
  • DOCTYPE与浏览器渲染介绍
  • 将数据库从服务器移到浏览器--indexedDB基本操作封装
  • Flash在苹果、微软、火狐的围剿下生存期还有几年?有没有完善的替代方案?

相关文章

  • 2018-12-03HTML5编程之旅-Communication技术初探
  • 2017-08-06阻止移动设备(手机、pad)浏览器双击放大网页的方法
  • 2018-12-03span设为inline-block之后,为什么未包含文字时下面会多出一条空白?
  • 2017-08-06HTML5标签与HTML4标签的区别示例介绍
  • 2018-12-03HTML5 Canvas实战之实现烟花效果的代码案例
  • 2018-12-03有关replaceState的课程推荐6篇
  • 2018-12-03深入解析HTML5 内联框架--iFrame
  • 2018-12-03详解HTML5通讯录获取指定多个人的信息
  • 2018-12-03HTML5开发手机应用-详细介绍viewport的作用(图文)
  • 2018-12-03jQuery中如何实现toggle方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何让HTML5手机端弹出遮罩菜单特效
    • 关于7 个顶级的 HTML5 Canvas 动画图文赏析
    • 如何使用canvas画一个圆?用canvas画圆的三种动态实现方法
    • 利用html5 canvas破解简单验证码及getImageData接口应用
    • Html5 video 上传预览图片视频,设置、预览视频某秒的海报帧
    • HTML5 拖拽复制功能的实现
    • 纯html5+css3下拉导航菜单实现代码
    • 关于H5的pushState和replaceState的用法分析
    • font-weight:blod的跳动问题怎样用CSS解决
    • 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有