浏览器的兼容性问题

1.ie的haslayout是ie的渲染引擎的一部分，肯定元素自身的大小和组织内容，或者依赖本身的祖先元素来肯定本身的大小和组织自身内容。

 当haslayout为true时，须要本身来渲染本身，这时浮动或者很长很长的截断文字，都须要本身来组织内容肯定大小。

为false时就须要依赖父元素。

2.负责组织自身内容的元素，会有默认的布局，例如：*html,body, *table,tr,td,*img,*input,button,file,section,fileset,*marquee(因为设置文字滚动的)，（并非全部元素都有默认的布局layout，考虑性能和简洁）；

3.haslayout只存在于ie67及更低的版本，

4.当ie出bug时，考虑触发haslayout,  ie6的触发：display:inline,width,height,float,position:absolute,

                                                  ie7的触发：max-width:;max-height:;min-width:;min-height:;position:fixed;

                                                  或者zoom：1；

5.ie6浮动时会有双边距，用display:inline;解决，

6.ie6/7的负margin隐藏，给父元素去除haslayout,或者给子元素，position:relative;

7.透明度问题

 opacity：40；在ie6中很差使，须要出发haslayout，zoom:1;filter:alpha(opacity:40);

同时用css Hack来处理，条件，属性，选择符。<!--[if lge IE7]> 样式<[endif]--！>  ie6*和_,ie7*,

---------------------------------------------------------------------------------------------------------------

 

 

兼容性问题

1.ie8之前当给元素设置的高小于10px;时，一般会超出所设置的高，由于ie8及遨游，会默认给标签一个高度，即便是空标签；

解决方法：元素overflow：hidden；或者设置line-heigh小于你设置的高度；

 

2.img标签为行内标签，有些浏览器当图片并排显示时会有间距。

解决方法：给img添加浮动。

 

3.display:inline-block在ie9如下版本都不能很好的支持;

解决方法：要全都写display:inline-block;*display:inline;zoom:1;css Hack+触发haslayout;

 

4.用一行代码解决ie678910的兼容性问题。<meta http-equiv="X-UA-compatible" content="IE=IE10">指定使用ie10,

                                                        或者<meta http-equiv="X-UA-Compatible" content="chrome=1"> Google Chrome Frame也可让IE用上Chrome的引擎:

（http://www.cnblogs.com/yoosou/archive/2012/07/27/2612443.html）

（http-equiv详解：http://kinglyhum.iteye.com/blog/827807）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />使用最新的ie;
这样写能够达到的效果是若是安装了GCF，则使用GCF来渲染页面，若是没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，并且支持IE六、七、8等多个版本的IE浏览器。

 (备注：http-equiv:能够设置网页的到期时间，缓存cache， cookie，利于搜索殷勤的keywords,description, 设置字符集，).