让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳(html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等)

前言:

由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有下面两个:
1. 为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面,这样的维护成本比较高,也失去响应式设计的意义。
2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式(Bootcss官方例子也是如此)。

 

下面先概述回顾一下H5和Css3,再尝试对一些为实现 Html5 和 Css3 兼容性的JS进行归纳

 

 

一、html5回顾:

 

1、H5介绍

HTML5 是最新的 HTML 标准。 是专门为承载丰富的 web 内容而设计的,并且无需额外插件

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 拥有新的语义、图形以及多媒体元素

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建

HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

 

2、新特性:

新的语义元素,比如 <header>, <footer>, <article>, and <section>

新的表单控件,比如 calendar、date、time、email、url、search

强大的图像支持(借由 <canvas> 和 <svg>)

强大的多媒体支持(借由 <video> 和 <audio>)

强大的新 API,比如用本地存储取代 cookie

 

3、注意事项:

HTML5 中默认的字符编码是 UTF-8。

所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。

项目中尽量使用小写文件名:大多数 web 服务器(Apache、Unix)对文件名的大小写敏感,其他 web 服务器(微软,IIS)对大小写不敏感

HTML 文件名应该使用扩展名 .html(而不是 .htm),html中的内联视频尽量不要自动播放

 

 

二、CSS3回顾:

 

1、CSS3介绍

CSS3 是最新的 CSS 标准。

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。较小的模块化较利于规范及时调整、更新和发布,同时不同浏览器厂商可以有选择的支持一部分模块,这样有利于CSS3的推广。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 。

 

2、CSS3新特性

 

   2.1、边框特性

CSS3对网页中的边框进行了一些改进,主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框,通过CSS3的属性可以快速实现圆角定义,同时还可以根据实际情况针对特定角进行圆角定义 。

 

 

   2.2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题,帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计,简化了背景图片的维护成本 。

 

   2.3、颜色与透明度

CSS3颜色模块的引入,实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式这几种颜色模式的提出,在做开发的时候不仅可以设置元素的色彩,还能根据需要轻松地设定rgba元素透明度

 

   2.4、多列布局与弹性盒模型布局

flex box弹性盒子,CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样,把一个简单的区块拆成多列,并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局,轻松地实现页面中的某一区块在水平、垂直方向对齐,是进行响应式网站开发的一大利器 。

 

   2.5、盒子的变形

在CSS2.1中,想让某个元素变形必须要借助JavaScript写大量的代码实现,在CSS3中加入了变形属性,该属性在2D或3D空间里操作盒子的位置和形状,来实现例如旋转、扭曲、缩放或者移位。变形属性的出现,使Web前端中的元素展示不仅仅局限在二维空间,Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素,web前端中的内容展示更加形象、真实 。

 

  2.6、过渡与动画

CSS3的"过渡"(transition)属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果,让某些效果变得更加具有流线性与平滑性。CSS3的"动画"(animation)属性能够实现更复杂的样式变化以及一些交互效果,而不需要使用任何flash或JavaScript脚本代码。过渡与动画的出现,使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示,而是通过简单的方法使页面元素动了起来,实现了元素从静到动的变化 。

 

   2.7、Web字体

CSS3中引入了@font-face,@font-face是链接服务器字体的一种方式,开发人员可以使用用户计算机之外的字体,只需要将喜欢的字体下载后包含再网站中,它会自动下载给需要的用户 。使用如下:

<style> 
@font-face
{font-family: myFirstFont;src: url(sansation_light.woff);
}div
{font-family:myFirstFont;
}
</style>

 

   2.8、媒体查询

CSS3中引入媒体查询(mediaqueries),可为不同分辨率的设备定义不同的样式。比如,在可视区域小于480像素时,可能想让原来在右侧的网站侧栏显示在主内容的下边,以往必须通过JavaScript判断用户浏览器的分辨率,然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作 。

 

   2.9、阴影

阴影主要分为两种:文本阴影(text-shadow)和盒子阴影(box-shadow)。文本阴影在CSS2中已经存在,但没有得到广泛的运用(CSS2.1中删除了)。CSS3延续了这个特性,并进行了新的定义,该属性提供了一种新的跨浏览器解决方案,使文本看起来更加醒目。CSS3中的盒子阴影的引入,可轻易地为任何元素添加盒子阴影 

 

 

 

3、CSS3兼容性和其它

浏览器厂商以前就一直在实施CSS3,虽然它还未成为真正的标准,但却提供了针对浏览器的前缀:

 

   Chrome(谷歌浏览器):-webkit-

   Safari(苹果浏览器):-webkit-

   Firefox(火狐浏览器):-moz-

   lE(IE浏览器):-ms-

   Opera(欧鹏浏览器):-0-

 

例如,CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient,而Safari使用-webkit-gradient,这两种语法都使用了厂商类型的前缀。

需要注意的是,在使用有厂商前缀的样式时,也应该使用无前缀的。这样可以保证当浏览器移除了前缀,使用标准CSS3规范时,样式仍然有效。

 

 

 

三、实现 Html5 和 Css3 兼容性的JS进行归纳如下:

 

1、html5shiv.js:

解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。

 

使用:

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

GitHub下载:  https://github.com/aFarkas/html5shiv/releases

 

 

2、respond.js

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

使用:

<!--[if lt IE 9]><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script><![endif]—>

注意事项:

1.1、由于浏览器的安全规则问题,Respond.js 不能通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试IE8下面的Respond.js 响应式特性,必须用http服务器(例如apache、nginx)托管HTML页面才可以。

1.2、Respond.js 不支持通过 @import 引入的CSS文件。例如,Drupal 一般被配置为通过 @import 引入CSS文件,Respond.js对其将无法起到作用。 

1.3、IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因,Bootstrap v3.0.1版本开始,我们不再为.container使用max-width

1.4、另一种让ie8及以下支持css3媒体查询的css3-mediaqueries.js 像上面引入也可,但是会出现闪屏 不是特别推荐使用, 上面是最常用的

 

GitHub下载:https://github.com/scottjehl/Respond

 

 

 

3、background-size-polyfill.htc :  

使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。

使用如下

.selector { background-size: cover; behavior: url(/backgroundsize.min.htc); -ms-behavior: url(/backgroundsize.min.htc); 
}

 

也可以通过滤镜filter实现,如下

body {background: url() no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');
}

 

但是使用滤镜filter实现IE8下的background-size 属性效果时 ,局限性如下

引用图片不能透明的,否则会出现双层图片的效果;

不能指定任意大小background百分比,可用cover;

用于单张图片不能使用图片精灵等拼图;

要引用绝对路径图片,

 

GitHub下载:https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc

 

 

 

4、Normalize.css

不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异。当然,也可以使用 reset.css

使用normalize.css有下几个优点:

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式:为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性:用一些小技巧
  • 解释代码:用注释和详细的文档来

下载链接:https://pan.baidu.com/s/1Yrv743iwuRZ7XmzZYknFxg    提取码:hevm 
 

 

5、ie-css3.htc

是一个可以让IE低版本(如IE6/7/8)浏览器支持部份CSS3属性的htc文件,比如盒阴影box-shadow、圆角属性border-radius、文字阴影属性text-shadow

实现原理:VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。可以理解为:VML是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果

使用步骤:样式中增加 behavior: url(项目绝对路径ie-css3.htc);类似background-size-polyfill.htc的使用

 

注意事项:

 当前元素一定要有定位属性,position:relative或position:absolute。 z-index值一定要比周围元素的要高;

http协议访问 ;

原生IE浏览器访问,兼容模式显示可能没效果。

支持样式: border-radius 只设置一个角落的圆角属性时无效;

box-shadow 只支持#(000)黑色阴影;

text-shadow IE下样式表现与Firefox/Safari/Chrome存在差异。

 

GitHub下载:https://github.com/lc133/ie-css3.htc

 

 

 

5、pie.htc

用CSS的behavior行为,可以调用此文件,然后让IE6\7\8也能实现一些常见的CSS3效果,如圆角(border-radius),盒阴影(box-shadow),背景渐变(gradient),多图片背景(multiple background images)、透明度(rgba)

 

使用如下实现线性渐变:

.demo{height: 100px ;width:200px;background:linear-gradient(90deg,#00FFFF,#0000FF);-pie-background:linear-gradient(0,#00FFFF,#0000FF);behavior: url(static_resources/PIE.htc);
}

实现原理上类似ie-css.htc:IE下这些CSS3效果实现是借助于VML,由VML绘制圆角或是投影效果的容器元素,然后这个容器元素作为目标元素的后兄弟节点插入,如果目标元素position:absolute 或是 position:relative,则这个css3-container元素将会设置与之一样的z-index值,在DOM tree中,同级的元素总是后面的覆盖前面的,所以这样就会覆盖。解决方式是设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值(不可为-1);

 

注意事项:

border-image(IE6/7/8只会以stretch的形式进行填充,即使border-image-repeat属性是repeat和round);

使用绝对路径;

PIE不支持border-top-left-radius表示左上圆角的缩写方式;

在服务器上提供 htc文件的MIME 配置类型

 


           官方下载:http://css3pie.com/

 

 

 

6、cssSandpaper库:

cssSandpaper是一个CSS3的JavaScript库使用特定的CSS书写规则可以让页面元素支持CSS3的一些特性,例如旋转,拉伸,盒阴影,渐变等效果,包括IE浏览器。由于cssSandpaper实现IE下的CSS3效果全部都是使用的filter滤镜实现的,所以其中就有不少局限性,例如IE中没有支持圆角的滤镜,所有cssSandpaper无法实现圆角效果,同样的原因,IE浏览器下box-shadow没有模糊过渡,不支持径向渐变等。然而,还是可以实现不少炫酷的效果的。

一旦调用了cssSandpaper CSS3 JavaScript库文件后,实现CSS3效果的调用也比较特别,需要使用特定的前缀样式写法,而且很重要的是cssSandpaper支持JavaScript,也就是说,可以通过js设置,动态改变各个浏览器(包括IE)CSS3表现,这往往可以用来实现一些精湛的UI表现。

下载及使用参考:https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/

 

 

 

 

参考网址:

https://blog.csdn.net/enweitech/article/details/80802677

https://www.zhangxinxu.com/wordpress/2010/05/csssandpaper-%E5%85%BC%E5%AE%B9ie%E7%9A%84css3-javascript%E5%BA%93/

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win7电脑连不上网怎么办

win7电脑连不上网怎么办?如今的电脑如果没有网络&#xff0c;那基本等于全废了&#xff0c;毕竟大家的电脑总不能一直用于单机办公和娱乐吧。因此&#xff0c;遇到电脑连不上网络的情形是相当令用户感到头疼的。下面小编就和大家分享几个常见的引起win7电脑连不上网的解决方法…

浏览器兼容video视频播放的多种方法

前言&#xff1a; 在 HTML 中播放视频并不容易&#xff01;因为直到现在&#xff0c;仍然不存在一项旨在网页上显示视频的标准。今天&#xff0c;大多数视频是通过插件&#xff08;比如 Flash&#xff09;来显示的。然而&#xff0c;并非所有浏览器都拥有同样的插件。 比如win…

win7系统如何取消自动开机

最近有位win7系统用户在使用电脑的过程中&#xff0c;发现电脑总是半夜自动开机&#xff0c;用户不知道怎么解决这个问题&#xff0c;为此非常苦恼&#xff0c;那么win7系统如何取消自动开机呢?今天小编为大家介绍win7系统取消自动开的操作教程。 win7系统如何取消自动开机 …

px、em、rem区别介绍

PX px像素&#xff08;Pixel&#xff09;。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小&#xff1b;2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位&#xff1b;3. Firefox能够调整px和em…

win7系统如何清理系统日志

相信很多电脑用户都知道&#xff0c;电脑系统在运行的时候会产生系统日志&#xff0c;它可以记录系统中的硬件、软件和系统的各种问题信息&#xff0c;可以通过它检索错误发生的原因&#xff0c;不过时间长了&#xff0c;这类日志文件就会积压&#xff0c;导致系统存储变小&…

pdf文件加密解密,pdf忘记密码解密的办法

1、pdf文件加密 步骤&#xff1a;wps》菜单“保护”》文档加密&#xff0c;设置编辑及页面密码&#xff0c;如下 2、pdf解密 在解密窗口取消选择“设置编辑及页面密码”&#xff0c;如下 注意&#xff1a;当忘记pdf密码时&#xff0c;可以使用pdf解密软件解密&#xff0c;如下…

2021-06-07

如何解决360浏览器卡死的问题 我们在上网的时候&#xff0c;不可缺少的就是浏览器了&#xff0c;有一大部分人还是喜欢用360浏览器的。刚开始用360浏览器的时候感觉很不错&#xff0c;都都不知什么情况&#xff0c;老是无故崩溃&#xff0c;或者时常卡死&#xff0c;上网慢&am…

伪类::selection自定义文本选中时的样式(CSS3样式),CSS3的word-break单次换行

1、::selection CSS3伪类自定义文本选中时的样式 有的人在浏览网页时&#xff0c;喜欢一边选中文本一边阅读。在windows环境下&#xff0c;正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式&#xff0c;可以通过css中有这样的一个伪类::selection用于自…

如何打造高大上的微信朋友圈 打造微信高逼格朋友圈教程

1、注意发朋友圈的频率&#xff0c;单次动态不要超过两条 学会给自己的朋友圈排期看起来简单&#xff0c;其实真的做起来非常难&#xff0c;这就和每天坚持做十个俯卧撑和写文章一样难&#xff0c;很少有人能够坚持下来&#xff0c;但是坚持下来的人&#xff0c;往往都收获了惊…

修改elementUI组件样式无效的多种解决方式

前言&#xff1a;vueelementUI项目开发中&#xff0c;经常遇到修改elementUI组件样式无效的问题&#xff0c; 原因&#xff1a;在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后&#xff0c;工作原理是将当前组件的节点添加一个…

火狐浏览器怎么样 火狐浏览器都有哪些优缺点

火狐浏览器是一个自由及开放源代码的网页浏览器&#xff0c;支持主流的全部系统&#xff0c;最近不少朋友问我火狐浏览器怎么样?作为一名火狐浏览器的用户&#xff0c;在这边给大家介绍火狐浏览器的各种优缺点&#xff0c;赶紧搬好小椅子&#xff0c;介绍开始啦。 火狐浏览器…

CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)

随着宽屏的不断普及&#xff0c;CSS3出现了media媒体查询技术 一、了解Media 相关知识 1、了解Media Queries Media Queries能在不同的条件下使用不同的样式&#xff0c;使页面在不同在终端设备下达到不同的渲染效果。其原理就是允许添加表达式用以媒体查询&#xff08;包括媒…

腾讯视频怎么设置全速下载模式

腾讯视频界面非常简洁友好&#xff0c;是播放器家园网小编一直推荐的软件&#xff0c;今天给大家重点分享“腾讯视频怎么设置全速下载模式”。腾讯视频播放器是播放器家园网小编用过最好用的一款&#xff0c;在这里能够不同类型的电视剧和电影&#xff0c;都是采用了4K级高清画…

浅谈Normalize.css

转载自简书&#xff1a;https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件&#xff0c;但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset&#xff0c;Normalize.css是一种现代的&#xff0c;为HTML5准备的优质替代方案…

傲游浏览器怎么创建笔记 傲游浏览器笔记创建方法分享

和某些浏览器不同&#xff0c;傲游浏览器中的笔记功能拥有极清爽、极简约、极免费等三大特性&#xff0c;并因此获得了不少用户的青睐。那么&#xff0c;在傲游浏览器中该怎么创建笔记呢?下面小编就来分享一下傲游浏览器笔记创建的方法&#xff0c;有需要的朋友可以稍作参考。…

固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳

关于web页面布局&#xff0c;首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧&#xff1f; 固定布局(fixed layout) 固定布局&#xff0c;例如豆瓣网&#xff0c;无论如何change浏览…

win7电脑0x000007b蓝屏怎么办

win7电脑0x000007b蓝屏怎么办&#xff1f;0x000007b蓝屏是什么意思?当电脑出现蓝屏&#xff0c;其蓝屏代码是0x000007b&#xff0c;通常是由于bios设置中的硬盘模式与当前系统不符合所造成。大家可以参考小编给出的本篇教程将模式调为“AHCI”&#xff0c;尝试解决。 1、重启…

整理软件行业职位介绍(PM,RD,FE,UE,UI,QA,OP,DBA,BRD,MRD, PRD,FSD等)、组织结构、职责

职位概览缩写 GM(General Manager)总经理 VP(Vice President)副总裁 FVP(First Vice President)第一副总裁 AVP(Assistant Vice President)副总裁助理 CEO(Chief Executive Officer)首席执行官&#xff0c;类似总经理、总裁&#xff0c;是企业的法人代表。 COO(Chief Ope…

谷歌浏览器怎么查看网页源代码 Chrome浏览器网页源代码查看技巧分享

凭借简单、高效的使用体验&#xff0c;谷歌开发的网页浏览器“Chrome”在国内也不乏粉丝&#xff0c;甚至一度被视为装机必备的软件之一。但其操作方式和界面设计&#xff0c;与国产浏览器略有不同!那么&#xff0c;谷歌浏览器要怎么查看网页源代码?让我们一起来了解一下。 方…

windows下mysql8.0-64的安装、完全卸载及注意事项(亲测),MySQL和SQL Server的简单区别

Windows 上安装 MySQL 1、现在zip安装包&#xff1a; 点击链接 https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.11-winx64.zip 下载 zip 包。最新版本可以在 MySQL 下载 中下载中查看。 点击 Download 按钮进入下载页面&#xff0c;点击下图中的 No thanks, just star…