那些年我们一起处理的浏览器兼容

二年前，走出校门进了公司大门，成了前端工程师，有木有很拉风，听着是不是高大上&hellip;… 前台代码简单！！！！！！！！！！！门槛低！！！！！！！！！！！！！ 出入高档写字楼！！！！！！！！薪水高！！！ 都不想表达自己的小心脏悲伤了多久……HTML,JSON,JS,CSS,JQUERY,,,,,有木有！就单说这个兼容性问题，一大堆一大堆啊！这个要到IE6，那个要360，还有百度，猎豹等等等等一大堆浏览器有木有！要实现兼容有木有？MD，xp系统都不更新了好不，换个浏览器能S啊，换个新版本接触一下新风格，看一下新世界，你会Over啊！不说了，说多了都是泪，小可就把这两年的时间大大小小处理的一些兼容贴出来分享一下；不得不说！[b][size=7][color=Yellow]鄙视[/color][/size][/b]IE；1.使用clearfix类清除浮动；在需要清除浮动的位置引入该类。.clearfix{ display: block; zoom:1; } .clearfix:after,.clearfix:before{/*设定一个为空的元素，用来清除元素之间的浮动，这个只能作用于对大多数符合标准的浏览器；*/ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} * html .clearfix{height:1%;/*这是为了触发IEhaslayout*/}.clearfix{display:block;}2.IE6下的3像素；有时候吧，这个IE6会莫名其妙的多出来这个几像素，这是个非常讨厌的事情，毕竟咱们精精确确算的布局到这他这里变得有点惨不忍睹！不过使用_margin-right:-3px;就可以咯3.IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白 添加：zoom:1; 设置UL 的width4.IE低版本PNG图片不透明解决方案；小可比较懒散，所以这个PNG透明的问题还是比较喜欢使用JS来做处理的；这些JS 在网上有很多的DEMO，大家可以找找看，小可比较喜欢使用这个[url=http://www.dillerdesign.com/experiment/DD_belatedPNG/]DD_belatedPNG.js[/url]实现。具体的引入方式是：<!--[if IE 6]> <script src="css/DD_belatedPNG_0.0.8a.js" mce_src="css/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript">DD_belatedPNG.fix('*');</script> <![endif]--> 5.img引入图片之后会有几像素的空白间隙 可添加 img{display:block;}6.如何设置鼠标在所有浏览器中均显示手的形状 .p{cursor:pointer;}7.实现已知高宽元素垂直居中； #div{ position:relative; width:400px; height:400px; border：1px solid #f00; top:50%; left:50%; margin-left:-200px; margin-top:-200px; }8.内联元素 span 高宽设置； span{ display:block; width:200px; height:35px; }9.超链接保留有虚线框； a{ outline:none; }10.设置元素透明度之后，元素内的内容也会随之变成透明状态； .wraper{width:200px;height:200px;background:#f00;filter:alpha(opacity=50);opacity:.5;}.content{width:200px;height:200px;margin-top:-200px;}<div class="wraper"></div> <div class="content"> </div>11.设置元素横向居中； #div{ width:980px; margin:0px auto; }12.文字垂直居中、首行缩进； #lh20{ height:20px; line-height:20px; text-indent:1em; }13.设置浮动之后IE出现双倍间距； #div{ float:left; display:inline; }