瀏覽器兼容問題

所謂的瀏覽器兼容性問題，是指因爲不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什麼瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。

一、IE6不支持小於12px的盒子，任何小於12px的盒子，在IE6中看都大

解決方法：將盒子的字號，設置小（小於盒子的高），比如0px
 

height:4px;
_font-size: 0px;

注：css屬性前面加下劃線是IE6認識的專有屬性

二、IE6不支持用overflow:hidden來清除浮動

解決辦法：追加一條css:_zoom:1

overflow: hidden;
 _zoom: 1;

實際上_zoom:1能夠觸發瀏覽器hasLayout機制，這個機制只有IE6有

三、IE6雙倍margin的bug

當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素會出現雙倍margin
解決方法：
1、讓浮動的方向和margin方向相反（推薦）

2、使用hack，單獨給隊首的元素寫一個一半的margin，或者使用display: inline;

四、IE6的3px bug

子元素右（左）浮動，同時給浮動的子元素設置margin-right，在IE6中會多出3px
解決辦法：這時說明你的代碼是不標準的，因爲處理父子之間的距離不應該用margin

五、4.IE6最小最大寬度和最小最大高度的問題

IE 不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裏這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。

解決方法：

.min-width {
            min-width: 600px;
            _width: expression(document.body.clientWidth < 600 ? "600px" : "auto");
        }

.max-width {
            max-width: 600px;
            _width: expression(document.body.clientWidth > 600 ? "600px" : "auto");
        }


.min_height{
            min-height:200px;
            _height:expression(this.scrollHeight < 200 ? "200px" : "auto");
        }

.max_height{
            max-height:400px;
            _height:expression(this.scrollHeight > 400 ? "400px" : "auto");
        }

.min_and_max_width{
            min-width:300px;
            max-width:600px;
            _width: expression(document.body.clientWidth < 300 ? "300px" :
                    ( document.body.clientWidth > 600 ? "600px" : "auto"));
        }

.min_and_max_height{
            min-height:200px;
            max-height:400px;
            _height: expression( this.scrollHeight < 200 ? "200px" :
                     ( this.scrollHeight > 400 ? "400px" : "auto"));
        }

六、IE6下圖片下面有3px空隙產生

解決方法：設置img爲display:block或者設置vertical-align屬性爲vertical-align:top/bottom/middle/text-bottom 都可以解決.