常见的html、css以及javascript兼容方案

    浏览器兼容性一直是一个前端开发人员不可避免的大问题,这篇文章主要列举了html、css以及javascript中一些常见的兼容性问题以及对应的解决方案。

文中所有的demo下载地址:https://github.com/usecodelee/compatibility

Html&CSS部分:

1. audio&video

一般的做法:

<video controls="controls" autoplay="autoplay" width="512" height="288" src="myvideo.mp4"></video>

更好的做法:

<video width="512" height="288">

<source src="myvideo.mp4" type="video/mp4"></source> <source src="myvideo.ogv" type="video/ogg"></source> <source src="myvideo.webm" type="video/webm"></source> <object width="512" height="288" type="application/x-shockwave-flash" data="myvideo.swf">

<param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" />

 </object> 当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>

</video>

2. display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效,请实现兼容ie6、ie7的通用的方式。

解决方案:

display: inline-block; *display: inline; *zoom: 1;

通过 *zoom: 1; 去触发hasLayout的行为,然后通过 *display: inline; 去支持IE7及以下版本(高版本会直接使用display: inline-block;)  当hasLayout和inline在一起的时候,就触发了inline-block的行为在IE7及以下版本。

3. ul和ol列表缩进

      消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效。在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 

4. border-radius

语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? <length>:用长度值设置对象的圆角半径长度。不允许负值 <percentage>:用百分比设置对象的圆角半径长度。不允许负值

border-radius:20px;

兼容方法: 低版本的chrome:-webkit-border-radius:10px; 低版本的firefox:-moz-border-radius:10px; ie7以下版本不支持圆角 IE6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

5. IE的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 

解决方案:在这个div里面加上display:inline;  例如: 

Html: <div id=”div1”></div> 

CSS:

.div2 { background-color: red; float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display:inline; }

6. box-shadow

语法: box-shadow:none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]# inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 <offset-x>: 这是第一个 length值设置水平偏移量,如果是负值则阴影位于元素左边。 <offset-y>: 这是第二个 length值设置垂直偏移量,如果是负值则阴影位于元素上面。 <blur-radius>:这是第三个 length值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。 <color>:设置对象的阴影的颜色。 实例:

.div2 { background-color: red; float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; box-shadow: 20px 20px 10px #ccc; }

IE7、8:

解决方案: 第一种方法:

filter: progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc, offX=20, offY=20, positives=true);

IE7、8:

第二种方法:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction='120', Strength='20');

两种方法都存在的缺点:阴影不能边缘模糊

7. transform

兼容方法:

.transform{ -webkit-transform: x,y; -moz-transform: x,y; -ms-transform: x,y; -o-transform: x,y; transform: x,y; }

垂直翻转:

transform:rotateY(180deg)

IE8及以下:用IE滤镜

filter:fliph;//水平翻转 filter:flipv;//垂直翻转

JavaScript部分:

1. JSON.stringify函数在ie6/7中不支持,如何兼容?

if(!window.JSON) {     window.JSON = {         parse: function(sJson) {             return eval("(" + sJSON + ")");         },         stringify: function(obj) {             var result = "";             for(var key in obj) {                 if(typeof obj[key] == "string") {                     result += "\"" + key + "\":\"" + obj[key] + "\",";                 } else if(obj[key] instanceof RegExp) {                     result += "\"" + key + "\":{},";                 } else if(typeof obj[key] == "undefined" || obj[key] instanceof Function) {} else if(obj[key] instanceof Array) {                     result += "\"" + key + "\":[";                     var arr = obj[key];                     for(var item in arr) {                         if(typeof arr[item] == "string") {                             result += "\"" + arr[item] + "\",";                         } else if(arr[item] instanceof RegExp) {                             result += "{},";                         } else if(typeof arr[item] == "undefined" || arr[item] instanceof Function) {                             result += null + ",";                         } else if(arr[item] instanceof Object) {                             result += this.stringify(arr[item]) + ",";                         } else {                             result += arr[item] + ",";                         }                     }                     result = result.slice(0, -1) + "],"                 } else if(obj[key] instanceof Object) {} else {                     result += "\"" + key + "\":" + obj[key] + ",";                 }             }             return "{" + result.slice(0, -1) + "}";         }     }; }

2. element.children能够获取元素的元素子节点,但是低版本的ie不支持,如何在低版本的ie上兼容类似的功能。

function getElementChildren(element){     if(!element.children){         var element_arr = [];         var list = element.ChildNodes;         for(i=0; i<list.length; i++){             if (list[i].nodetype==1) {                 element_arr.push(list[i]);             }         }         return element_arr;     } else{         return element.children;     } }

3. element.dataset能够获取元素的自定义属性,但是低版本的ie不支持,如何在低版本的ie上兼容类似的功能。

function dataset(element) {

var obj = {}; if(element.dataset) {

return element.dataset;

} else { // console.log(element.attributes); for(var i = 0; i < element.attributes.length; i++) {

var key = element.attributes[i].nodeName; if(/^data-\w+$/.test(key)) { //判断是否以data-开头的属性名

var value = element.attributes[i].nodeValue; //值 var keyName = key.match(/^data-(\w+)/)[1]; //键名 obj[keyName] = value; //对象添加属性 }

}

} return obj;

}

4. window.getComputedStyle能够获取元素的实际样式,但是低版本的ie8及以下不支持,如何在低版本的ie上兼容类似的功能。

//获取当前样式 function getStyle(element, att) {

//特性侦测 if(window.getComputedStyle) {

//优先使用W3C规范 return window.getComputedStyle(element)[att];

} else {

//针对IE9以下兼容 return element.currentStyle[att];

}

}

文中所有的demo下载地址:https://github.com/usecodelee/compatibility

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

编写高质量 JavaScript -- 知识点小记

此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。

19910
来自专栏向治洪

微信小程序之picker组件

作为移动端的分发入口,微信小程序虽然没有当初期望的那么火,但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说,微信小程序对于开发还是很方便的,特别...

85750
来自专栏偏前端工程师的驿站

CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display...

22180
来自专栏mathor

事件模型

 事件模型如何理解呢,举个例子,你老婆出门了,让你在家看孩子,难道你每过一分钟就去看一次孩子吗,对于计算机来说,我做一个按钮,难道就一直监听这个按钮使用没有...

10310
来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

30370
来自专栏calvin

发现一个很N且免费的html5拓扑图 关系图 生成组件

1.4K40
来自专栏章鱼的慢慢技术路

用Python中的tkinter模块作图(续)

31470
来自专栏Java技术分享圈

杨老师课堂之JavaScript定时器限时抢购秒杀商品案例

定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码

12720
来自专栏coding for love

CSS入门8-三大特性之层叠特性与优先级

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

15630
来自专栏deepcc

emmet(Zen coding)前端写代码神器

39170

扫码关注云+社区

领取腾讯云代金券