浏览器及一些常用的兼容性
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"/>