热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这次给大家带来用关于老版本的浏览器不兼容H5和C3的处理方法,怎样让老版本浏览器支持HTML5?老版本浏览器兼容H5和C3的注意事项有哪些,下面就是实战案例,一起来看一下。
这次给大家带来用关于老版本的浏览器不兼容H5和C3的处理方法,怎样让老版本浏览器支持HTML5?老版本浏览器兼容H5和C3的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

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

第二种方法:Coding Javascript

但是不管使用以上哪种方法,都要初始化新标签的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 的做法更轻便一些。

这样可以引导用户开启脚本,或者直接跳转到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属性了。

相信看了这些案例你已经掌握了方法,更多精彩请关注 第一PHP社区 其它相关文章!

相关阅读:

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

bootstrap里如何统计table sum的数量

vue.js todolist如何实现

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


推荐阅读
  • Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 入门Java需熟练掌握哪些技术呢?
    Java工程师无疑是当下令人艳羡的工作之一,因此,每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]
  • 本文实例为大家分享了vue实现简单的登录弹出框的具体代码,供大家参考,具体内容如下初学vue框架,小小的写了一个登录弹出框效果各路大佬多多指教。不多废话,直接上代码:CSS:*{margin:0;padding:0;}*登陆按钮* ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Hadoop源码解析1Hadoop工程包架构解析
    1 Hadoop中各工程包依赖简述   Google的核心竞争技术是它的计算平台。Google的大牛们用了下面5篇文章,介绍了它们的计算设施。   GoogleCluster:ht ... [详细]
  • OAuth2.0指南
    引言OAuth2.0是一种应用之间彼此访问数据的开源授权协议。比如,一个游戏应用可以访问Facebook的用户数据,或者一个基于地理的应用可以访问Foursquare的用户数据等。 ... [详细]
  • 原文:http:blog.linjunhalida.comblogpjaxgithub:https:github.comdefunktjquery-pjax ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • Vue.Js_Vue之vue.js声明式渲染
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Vue之vue.js声明式渲染相关的知识,希望对你有一定的参考价值。ht ... [详细]
  • html css在线便宜,在线HTML、CSS和JS工具汇总
    本文提供了在线HTML、CSS和JS工具汇总,它们都是直接在浏览器上可以使用的在线工具,基本上都是比较简单操作的,只适合简单的调试工作&# ... [详细]
  • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
author-avatar
c颖c颖漂亮
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有