開發前台的朋友都知道，盡管我們就算用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