!--//渐变-->
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
苹果会自动给其一个圆角样式