浏览器及一些常用的兼容性

1渐变-->

background: #f6b439;

background: -moz-linear-gradient(top, #f6b439 0%, #825304 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6b439), color-stop(100%,#825304));

background: -webkit-linear-gradient(top, #f6b439 0%,#825304 100%);

background: -o-linear-gradient(top, #f6b439 0%,#825304 100%);

background: -ms-linear-gradient(top, #f6b439 0%,#825304 100%);

background: linear-gradient(to bottom, #f6b439 0%,#825304 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6b439', endColorstr='#825304',GradientType=0 );

2透明背景-->

opacity:0;filter:alpha(opacity=0);

3rgba-->

background: rgba(255,255,255,.1);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000000,endColorstr=#0000000);

4用谷歌内核或更高级的IE内核-->

< meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

使IE5,IE6,IE7,IE8兼容到IE9模式

< !–[if lt IE 9]>

< script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”>

<![endif]–>

5IE6/7实现display:inline-block-->

.test{display:inline-block; *zoom: 1; *display: inline;}

6IE8兼容-->

< meta http-equiv="X-UA-Compatible" content="IE=edge"/>

< meta http-equiv="content-type" content="text/html; charset=utf-8"/>

7IE8------z-index

IE8下z-index还取决于其父级relative的大小

8IE8背景图不显示

norepeat 前要有空格

9IE8兼容cover的做法

background:url('http://jt.6816.com/template/pc/images/5_05_03.jpg') no-repeat;background-size:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jt.6816.com/template/pc/images/5_05_03.jpg', sizingMethod='scale');"

10IE7兼容overflow的做法

在其父级或其上元素加上position：relative；overflow：hidden

11IE7兼容display:inline-block的做法

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

12ie兼容text-align

元素样式：text-align: -moz-center !important; 这个是火狐下的居中样式，而IE下的样式则是标准的：text-align:center;

13ie兼容float：right

1，将带有的元素放在最前边，比如：放在float：left前边

14td在IE7下字体换行高度变大的问题

将第一行的td width去掉

15IE专属写法

#tip { background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }

16ie7 js无法找到对象

可能在类最后一个多一个逗号 其他浏览器正常

17//select中有一个也可以选择

$('select')[0].selectedIndex = -1;

18zepto获取select的值

$('option').not(function(){ return !this.selected })

19css文字超出限制

.xianzhi{display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

多行显示引号使用

/*overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;*/

20火狐浏览器input缓存问题

给每一个input加上一个 autoconplete="off" 的属性

21自定义微信滑动专题不能使用position：fixed

要使用position：absolute，否则会导致安卓手机键盘悬浮的问题

22用自定义块级元素按钮，不用button

苹果会自动给其一个圆角样式

23遇到在div里放一张图片后会出现下边存在空隙

解决办法，添加fontsize=0

24ie7以下内容不出现 代码存在 移动窗口或者改变代码出现的问题

此时需判断是否为ie7以下 是的话js动态添加一次zoom：1进行渲染

25body即使加了overflow-x依然有滚动条的出现

多半是里边包含有块级元素，并添加了margin，或者padding效果导致文本超出最大限制

26关于获取ajax字符串转义为json的问题

有两种方式

1，通过eval('('+jsonData+')')此方式在解析字符串时，会执行该字符串中的代码，谨慎使用

2，通过JSON.parse(jsonData)方式来获取，该方法可以捕捉JSON中的语法错误，并允许你传入一个函数，用来过滤或转换解析结果

27应用界面挡住安卓手机头部的问题

 <preference name="statusBarAppearance" value="false"/> 

转载于:https://www.cnblogs.com/leijuan/p/6111848.html