CSS 2.0在IE6、7下的噁心表現

　　開發前台的朋友都知道，儘管我們就算用CSS2.0的東西，仍然會有諸多問題，開發一個相容良好的頁面，我們身邊常備的必然是IETester這款神器，它可以幫我們測試各種IE版本的情況下，我們的頁面到底怎麼樣，然後它有一些JS、CSS查看功能。所以，做一個網站現在就相容性就得調半天，結合IE、Firefox、Chrome來反覆看外觀是經常的事。好吧，來講來我的經曆吧，很久以前我在圖書館借過一本CSS Mastery的書，真心不錯，然後我就踏上了這條悲劇的Web瀏覽器安全色之路。

 

　　主要講下我經常遇到的問題:

　　1、3像素位移：IE6下的古老的問題，當對一個div用了float元素時，而div未使用時則會在兩個div之間出現3個像素的間隔。修複的辦法就是兩者都float，或者手動調整已浮動的div的屬性margin-right/margin-left為-3px。
　　2、div有高度：IE6下，div的高度height無論設定為多小，仍顯示的是一個12px左右高度的層，這時候我一般是把line-height屬性設定為0，就正常了。不過網上也有其它方案，我沒怎麼用過，大家自行測試吧：在定義height值的同時，還定義font-size為0，或者定義overflow為hidden。

　　3、overflow不管用：IE6的overflow只有在元素的height和width值都設定，且display為block的時候才有用。

　　4、雅黑字型不顯示：IE6/7，設定了字型font-family為“微軟雅黑”，卻沒有任何效果，這時用"Microsoft YaHei"可能會解決此問題。

　　5、png無透明度：IE6下，其實這個問題解決方案已經比較成熟了，有各種js檔案可以協助解決，不過我一般還是趨向於使用filter來完成少量的透明度圖片處理：

1 background:url('imgs/test.png') no-repeat;2 _background:none;3 _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='imgs/test.png');

　　原理就是只有IE6才能識別_開頭的css元素，然後使用微軟的filter來做這個透明度，雖然效率會低了點，但是少量圖還是無所謂的。

　　6、z-index無效：IE6、IE7的絕對位置都有這個問題，具體問題如果父標籤不同，想要比較z-index來實現層疊的話就會失敗，IE6、7都認為先要“拼爹”，看父元素的z-index哪個大，再來比較自己的z-index屬性。如果父元素沒有這個值，就預設為0，唉，這IE是要鬧哪樣，解決方案就是一層一層地加z-index，加postion屬性值，讓兒子能找到爹。

　　其實還有很多，我也記不起了，有空再加吧。

　　這種亂七八糟的Bug太多了，於是網上有各種瀏覽器的CSS hack來協助我們修正顯示的不統一問題。

　　

　　以width屬性為例CSS Hack主要有：

用法	支援
_width:100px;	IE6
*width:100px;	IE6、IE7
+width:100px;	IE7
width:100px\9;	All IE
@media all and (-webkit-min-device-pixel-ratio:0){選擇符{width:100px;}}	Chrome、Safari
@media all and (min-width:0px){ 選擇符 {width:100px\0;}}	Opera
width:100px\0;	IE8、IE9
width:100px\9\0;	IE9

   　

　　另外還可以使用IE特有的條件判斷語句：

　　<!--[if gte IE 6]> 這段文字僅顯示在 IE6及IE6以上版本。 <![endif]-->

　　<!--[if gt IE 6]> 這段文字僅顯示在 IE6以上版本（不包含IE6）。 <![endif]-->

　　<!--[if IE 6]> 這段文字僅顯示在 IE6。 <![endif]-->

　　上面的語句都是通過IE專屬的條件注釋來完成判斷，lt=小於，gt=大於,lte=小於及等於，gte=大於及等於，上面的6代表了IE版本號碼，我們可以取6、7、8、9...分別區別IE版本，再在中間的部分插入專屬的Html代碼（JS、CSS），以修正不同IE瀏覽器版本的問題。

轉載請註明原址：http://www.cnblogs.com/lekko/archive/2012/07/23/2605098.html