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

标签：length   ring   url   字体   []   display   getc   eth   var   

!--//渐变-->

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 );

--//透明背景-->

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

--//rgba-->

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

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

--//用谷歌内核或更高级的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]–>

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

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

--//IE8兼容-->

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

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

< meta name="apple-mobile-web-app-capable" content="yes"/>

--js获取li元素的方法-->

html代码

< div id="star">

< ul>

< li>< img src="images/star1.jpg" /></li>

< li>< img src="images/star1.jpg"/></li>

< li>< img src="images/star1.jpg"/></li>

< li>< img src="images/star1.jpg"/></li>

< li>< img src="images/star1.jpg"/></li>

< /ul>

< /div>

js代码

var a = document.getElementById("star");

var b = a.getElementsByTagName("ul");

var c = b[0].getElementsByTagName("li");

非IE6,7,8可以直接用自带的属性 getElementsByClassName,如果需要考虑兼容，就需要自己写了。下面是自己写的：

function getClassName(obj,sName) //-->obj是要获取元素的父级

{ //-->sName是class名字

if(document.getElementsByClassName)

{

return obj.getElementsByClassName(‘sName‘);

}

else

{

var aTmp = obj.getElementsByTagName(‘*‘);

var aRes=[];

var arr =[];

for(var i=0;i<atmp.length;i++)< p="">

{

arr = aTmp[i].className.split(‘ ‘);

for (var j=0;j<arr.length;j++)< p="">

{

if(arr[j] == sName)

{

aRes.push(aTmp[i]);

}

}

}

return aRes;

}

IE8------z-index

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

IE8背景图不显示

norepeat 前要有空格

IE8兼容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‘);"

IE7兼容overflow的做法

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

IE7兼容display:inline-block的做法

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

ie兼容text-align

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

ie兼容float：right

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

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

将第一行的td width去掉

IE专属写法

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

ie7 js无法找到对象

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

//select中有一个也可以选择
$(‘select‘)[0].selectedIndex = -1;

zepto获取select的值

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

css文字超出限制

.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;*/

火狐浏览器input缓存问题

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

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

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

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

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

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

标签：length   ring   url   字体   []   display   getc   eth   var   

原文地址：http://www.cnblogs.com/leijuan/p/6111848.html