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

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

《浏览器兼容性问题解决方案汇总.docx》由会员分享，可在线阅读，更多相关《浏览器兼容性问题解决方案汇总.docx（11页珍藏版）》请在冰豆网上搜索。

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

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

【来源：

小鸟云计算】

Ps.小鸟云，国内专业的云计算服务商

普及：

浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。

俗话说：

没有IE就没有伤害。

贴士：

内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。

Normalize.css

不同浏览器的默认样式存在差异，可以使用Normalize.css抹平这些差异。

当然，你也可以定制属于自己业务的reset.css

∙

简单粗暴法

∙*{margin:

0;padding:

0;}

html5shiv.js

解决ie9以下浏览器对html5新增标签不识别的问题。

∙

--[ifltIE9]>

∙

∙

picturefill.js

解决IE91011等浏览器不支持标签的问题

∙

∙

IE条件注释

IE的条件注释仅仅针对IE浏览器，对其他浏览器无效

IE属性过滤器（较为常用的hack方法）

针对不同的IE浏览器，可以使用不同的字符来对特定的版本的IE浏览器进行样式控制

image

image

浏览器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

∙

清除浮动最佳实践

∙.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;

∙ 

∙

Loremipsumdolorsit.

∙

hidden;"> 

∙

Loremipsumdolorsit.

∙