瀏覽器的兼容性問題

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, 設置字符集，).