浏览器兼容性问题解决方案汇总

浏览器兼容性问题解决方案汇总【来源：小鸟云计算】Ps.小鸟云，国内专业的云计算服务商普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。Normalize.css不同浏览器的默认样式存在差异，可以使用Normalize.css抹平这些差异。当然，你也可以定制属于自己业务的reset.csslinkhref==stylesheet简单粗暴法*{margin:0;padding:0;}html5shiv.js解决ie9以下浏览器对html5新增标签不识别的问题。!--[ifltIE9]scripttype=text/javascriptsrc=/script![endif]--respond.js解决ie9以下浏览器不支持CSS3MediaQuery的问题。scriptsrc=/scriptpicturefill.js解决IE91011等浏览器不支持picture标签的问题scriptsrc=/scriptIE条件注释IE的条件注释仅仅针对IE浏览器，对其他浏览器无效IE属性过滤器（较为常用的hack方法）针对不同的IE浏览器，可以使用不同的字符来对特定的版本的IE浏览器进行样式控制imageimage浏览器CSS兼容前缀-o-transform:rotate(7deg);//Opera-ms-transform:rotate(7deg);//IE-moz-transform:rotate(7deg);//Firefox-webkit-transform:rotate(7deg);//Chrometransform:rotate(7deg);//统一标识语句a标签的几种CSS状态的顺序很多新人在写a标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active样式没有效果，其实只是写的样式被覆盖了。正确的a标签顺序应该是：==lovehate==link:平常的状态visited:被访问过之后hover:鼠标放到链接上的时候active:链接被按下的时候完美解决Placeholderinputtype=textvalue=Name*onFocus=this.value='';onBlur=if(this.value==''){this.value='Name*';}清除浮动最佳实践.fl{float:left;}.fr{float:right;}.clearfix:after{display:block;clear:both;content:;visibility:hidden;height:0;}.clearfix{zoom:1;}BFC解决边距重叠问题当相邻元素都设置了margin边距时，margin将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为BFC：overflow:hidden;divclass=boxid=boxpLoremipsumdolorsit./pdivoverflow:hidden;pLoremipsumdolorsit./p/divpLoremipsumdolorsit./p/divIE6双倍边距的问题设置ie6中设置浮动，同时又设置margin，会出现双倍边距的问题display:inline;解决IE9以下浏览器不能使用opacityopacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);解决IE6不支持fixed绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题/*IE6hack*/*html,*htmlbody{background-image:url(about:blank);background-attachment:fixed;}*html#menu{position:absolute;top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');}IE6背景闪烁的问题问题：链接、按钮用CSSsprites作为背景，在ie6下会有背景图闪烁的现象。原因是IE6没有将背景图缓存，每次触发hover的时候都会重新加载解决：可以用JavaScript设置ie6缓存这些图片：document.execCommand(BackgroundImageCache,false,true);解决在IE6下，列表与日期错位的问题日期span标签放在标题a标签之前即可解决IE6不支持min-height属性的问题min-height:350px;_height:350px;让IE7IE8支持CSS3background-size属性由于background-size是CSS3新增的属性，所以IE低版本自然就不支持了，但是老外写了一个htc文件，名叫background-sizepolyfill，使用该文件能够让IE7、IE8支持background-size属性。其原理是创建一个img元素插入到容器中，并重新计算宽度、高度、left、top等值，模拟background-size的效果。html{height:100%;}body{height:100%;margin:0;padding:0;background-image:url('img/37.png');background-repeat:no-repeat;background-size:cover;-ms-behavior:url('css/backgroundsize.min.htc');behavior:url('css/backgroundsize.min.htc');}IE6-7line-height失效的问题问题：在ie中img与文字放一起时，line-height不起作用解决：都设置成floatwidth:100%width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响.Firefox下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了，跟了iecursor:hand显示手型cursor:hand，ie6/7/8、opera都支持，但是safari、ff不支持cursor:pointer;td自动换行的问题问题：table宽度固定，td自动换行解决：设置Table为table-layout:fixed，td为word-wrap:break-word让层显示在FLASH之上想让层的内容显示在flash上，把FLASH设置透明即可1、paramname=wmodevalue=transparent/2、paramname=wmodevalue=opaque/键盘事件keyCode兼容性写法varinp=document.getElementById('inp')varresult=document.getElementById('result')functiongetKeyCode(e){e=e?e:(window.event?window.event:)returne.keyCode?e.keyCode:e.which}inp.onkeypress=function(e){result.innerHTML=getKeyCode(e)}求窗口大小的兼容写法//浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）//1600*525varclient_w=document.documentElement.clientWidth||document.body.clientWidth;varclient_h=document.documentElement.clientHeight||document.body.clientHeight;//网页内容实际宽高（包括工具栏和滚动条等边线）//1600*8varscroll_w=document.documentElement.scrollWidth||document.body.scrollWidth;varscroll_h=document.documentElement.scrollHeight||document.body.scrollHeight;//网页内容实际宽高(不包括工具栏和滚动条等边线）//1600*8varoffset_w=document.documentElement.offsetWidth||document.body.offsetWidth;varoffset_h=document.documentElement.offsetHeight||document.body.offsetHeight;//滚动的高度varscroll_Top=document.documentElement.scrollTop||document.body.scrollTop;DOM事件处理程序的兼容写法（能力检测）vareventshiv={//event兼容getEvent:function(event){returnevent?event:window.event;},//type兼容getType:function(event){returnevent.type;},//target兼容getTarget:function(event){returnevent.target?event.target:event.srcelem;},//添加事件句柄addHandler:function(elem,type,listener){if(elem.addEventListener){elem.addEventListener(type,listener,false);}elseif(elem.attachEvent){elem.attachEvent('on'+type,listener);}else{//在这里由于.与'on'字符串不能链接，只能用[]elem['on'+type]=listener;}},//移除事件句柄removeHandler:function(elem,type,listener){if(elem.removeEventListener){elem.removeEventListener(type,listener,false);}elseif(elem.detachEvent){elem.detachEvent('on'+type,listener);}else{elem['on'+type]=null;}},//添加事件代理addAgent:function(elem,type,agent