Joyde·zhong的博客

纷歧样的人纷歧样的品味会对同一幅景象发生纷歧样的感触，晶莹的雪山有着不染纤尘的美，潺潺的小溪有着清秀天然的美，波澜壮阔的大海有着广大豪宕的美，每一种美都给人纷歧样的震撼，都是心旷神怡的。

你身边这样的人吗

说到兼容性，是最让前端开发人员头痛的问题。同是一段代码，在不同的浏览器上显示的效果不同，轻者某些效果没有出来，重者乱成一锅粥。看着自己码了几天的代码到浏览器上却乱成一团，是不是突然之间感觉心很累。下面就兼容问题归纳了三种解决的方式，以后遇到了兼容性问题从这几个方面考虑就差不多了。

BFC，块格式化上下文( Block formatting context )，是指初始化块级元素定义的环境。在CSS中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。其中我们使用比较多的是块级可视化上下文，CSS3草案中将之称为“flow root”，但我们仍习惯叫BFC，其的触发条件如下：

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。可以理解为一个专有的属性。很多的ie下的css bug都与其息息相关，因此我们需要取消hasLayout或者触发hasLayout来调节在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

由于不同的浏览器对CSS的解析认识不一样，比如IE 6,IE 7,Firefox等，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。我们最常用的就是这在一些css样式前面加上-webkit-、-moz-等。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。