浏览器兼容

1.浏览器谷歌的最小字号12px,小于12px的设置不起作用
（1）支持小于12px的字号的浏览器包括：IE、火狐、QQ的兼容模式，360浏览器（极速和安全）的兼容模式，世界之窗的ie内核模式、uc浏览器的ie内核等

（2）、不支持小于12px的浏览器包括：谷歌、QQ的极速模式，360浏览器（极速和安全）的极速模式，世界之窗的ie内核模式

总之是-webkit内核的浏览器不支持小于12px字号的设置。

要想-webkit内核的浏览器支持小于12px的字号的方法：利用css3的缩放来解决：

.chrome_adjust {
                                font-size: 9px;
                                -webkit-transform: scale(0.75);
                                -o-transform: scale(1);    //针对能识别-webkit的opera browser设置
                            }

2.Background-size的兼容处理
问题描述：background-size不支持ie8。

出现的场景：针对多倍图的时候,把图片用做背景图片的时候

解决方法：方法一、图片不用做背景图

方式二、不用多倍图的图片

方式三、给两个图片，一个一倍图的banner1.jpg，另一个多倍图的banner.jpg。

.banner{background:#17AFEA centercenter no-repeat;background-image:url(../img/banner1.jpg) \9;
				background-size:1920px 100%;width:100%;height:460px; }
:root .banner{background-image:url(../img/banner.jpg);}

可以支持ie8以下的浏览器
3.透明度（opacity）的使用
兼容：opacity在ie上有兼容问题，利用滤镜解决

方法：（1）.class{opacity:0.6;filter:alpha(opacity=60);}这样写的话就没有兼容问题了

影响范围：其子元素的透明度都受影响。

与rgba()的区别：不会影响子元素的透明度，只用作背景色。浏览器支持ie9以及以上。

兼容性解决：利用滤镜filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000); （不推荐使用，因为使用了效果也不好，并且浪费资源）。
4.First-child,last-child,nth-child()的兼容处理
兼容性：前者ie8以及以上，后两者ie9以及以上的版本

First-child：expression_r(this.previousSibling==null?)是为了ie8以下的浏览器的支持

last-child：expression_r(this.nextSibling==null?)

nth-child()的兼容性利用利用jquery来实现，如果是关于margin的，可以利用父元素的margin的负值来解决
5.关于css3的兼容性处理
现在除了在属性签加不同内核的前缀，暂时没有别的好的办法处理，但是需要注意一点在低版本的浏览器可以没有绚烂的效果但不能影响其他的布局，在高版本的浏览器有比较好的效果。
6.多行省略
用css实现——只有在谷歌浏览器有效果，其他的浏览器都没有效果

.text{
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

用js实现

<style>
		.cont{width:500px;border:1px solid #999;}
</style>
<div class="cont">
		  <span class="txt">兼容多种浏览器的，多行文本多余显示省略号兼容多种浏览器的，多行文本多余显示省略号兼容多种浏览器的，多行文本多余显示省略号</span>
		  <a href="#" class="more">查看全文</a>
</div>
<script src="js/jquery-1.11.3.js"></script>
    	<script>
    		$('.txt').each(function(){
	    var maxwidth=40;  //设置显示的字数 ，这个根据要求看需要显示几行 
	    if($(this).text().length>maxwidth){
	        $(this).text($(this).text().substring(0,maxwidth));//截取字符串
	        $(this).html($(this).html()+'...');//加上省略号
	    }
	});
</script>

其他方式：多行文本溢出显示省略号(…)全攻略
7.css3 浏览器前缀

transform:rotate(7deg);
-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

8.windows系统与ios系统谷歌浏览器的区别
对于页面的数字元素，要设置他们的font-family，不然会默认清除样式设置的中文字体，解析不同，他们所占用的宽度不同，会对布局造成影响