瀏覽器兼容性問題（轉）

時間 2019-11-17

原文原文鏈接

常見瀏覽器的兼容問題

　　初學html和css時，天天切圖，總會遇到不少瀏覽器兼容性問題。最近一直關注移動平臺開發，就html和css來講，不用考慮那麼多瀏覽器兼容性問題。到如今，以致於不少瀏覽器兼容性幾乎忘光了。今天把之前總結的知識拿來分享一下，順便本身也複習一下。固然，其中確定有不少不足，望指正啊。

1 ie6.0橫向margin加倍

產生因素：塊屬性、float、有橫向margin。

解決方法：display：inline；

2 ie6.0下默認有行高

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；

3 在各個瀏覽器下img有空隙(緣由是：回車。)

解決方法:讓圖片浮動。

4 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。

解決方法：a 在子標籤最後清浮動{<div style="height:0;clear:both;"> </div>}

b 父標籤添加{overflow：hidden；}

c 給父標籤設置高度

5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，

解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}

html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（由於ie6有一個特徵，當定義一個高度時，若是內容超太高度，元素會自動調整高度。）

6 Ie6裏面：如li設寬、高，而且li裏面的標籤浮動，那麼li之間會有間距

解決方法：li不設寬、高或者li內的標籤不浮動

7 li之間有間距

解決方法：li 設置vertical-align:middle;

8 3像素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三像素問題。

解決方法：用hack技術，例如：全部瀏覽器通用 height:100px;

ie6專用_height:100px;

ie7專用*+height:100px;

ie6/ie7共用*height:100px;

9 當定義行內元素爲包含框時，且包含框包含的絕對定位元素以百分比爲單位進行定位時，會出現混亂。

解決方法：在行內元素里加入{zoom：1；}

10 當多個浮動元素中間夾雜着HTML註釋語句時，若是浮動元素寬度爲100%，則在下一行多顯示一個上一行最後一個字符。

解決辦法：給浮動元素添加display:inline;。

11 opacity 定義元素的不透明度

filter：alpha（opacity=80）；/*ie支持該屬性*/

opacity：0.8；/*支持css3的瀏覽器*/

12 兩個塊元素，豎向的margin值不增長，會重疊，其間距爲最大margin值。

13 優先級：被!important 註明的css屬性具備最高優先級(.abc{color:red !important;})。但在ie6中!important具備一個bug:在同一組css屬性中，!important不起做用。

14 火狐不識別background-position-y 或background-position-x;

---------------------------2014.01.10補充-------------------------------css

15 ie6 不支持 fixed

/*對於非IE6能夠這樣寫*/
#top{  
    position:fixed;  
    bottom:0;  
    right:20px;  
}  

/*可是IE6是不支持fixed定位的，須要另外重寫*/
#top{  
    position:fixed;  
    _position:absolute;  
    top:0;  
    right:20px;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));
}  

/*使用hack使IE6實現該效果，但這個東東會閃爍，須要如下代碼*/
*html{  
    background-image:url(about:blank);  
    background-attachment:fixed;  
}  

/*使固定在頂部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));  
}  

/*固定在底部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
}  
/*垂直居中*/
#top{
    position:fixed;
    top:50%;
    margin-top:-50px;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
}

16 解決 ie6 最大、最小寬高 hack方法

/* 最小寬度 */
.min_width{
    min-width:300px;
    _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}

/* 最大寬度 */
.max_width{
   max-width:600px;
   _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}

/* 最小高度 */
.min_height{
   min-height:200px;
   _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}

/* 最大高度 */
.max_height{
   max-height:400px;
   _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}

17 z-index不起做用的 bug

1）ie6下首先講講第一種z-index不管設置多高都不起做用狀況。這種狀況發生的條件有三個：一、父標籤position屬性爲relative；二、問題標籤含有浮動(float)屬性。
2）全部瀏覽器：它只認第一個爸爸
層級的高低不只要看本身，還要看本身的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。html

18 ie各個版本hack

/*類內部hack：*/
    .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE六、IE7共用*/
    .header {width:100px\0;}        /* IE八、IE9共用*/
    .header {width:100px\9;}        /* IE六、IE七、IE八、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

/*選擇器Hack：*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。