常見瀏覽器的兼容問題

 

　　初學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;">&nbsp;</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補充-------------------------------

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誰高誰低。

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*/ 

 

1.去掉iframe中橫向的滾動條   

　　　　 解決辦法：在加入iframe子頁面中添加  html{overflow-x:hidden;}

　　2.ie6中position：fixed不兼容   

　　　　解決辦法：  在固定定位的元素裏。。加入*position：absolute；*top：值；*left：值；

　　3.ie中圖片有邊框  

　　　　解決方法：img{ border：none；}

　　4.ie中：hover兼容性問題   

　　　　 解決辦法：只需引用一個文件就行：csshover3.htc（文件在桌面）；此文件必須和html文件在同一目錄（要放在一個文件夾下面）；而後調用代碼.放到　　　　　　            <head></head>中間:   <!--[if lte IE 6]>   <style type="text/css">   body { behavior:url("csshover3.htc"); }   </style>   <![endif]-->

　　5.IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block

 　　　　解決辦法：div{display:inline-block;*display:inline;*zoom:1;}

　　6.display:inline-block後元素之間有小間距

 　　　　解決辦法：能夠將元素不換行書寫（但可讀性差）

　　7.文字貫穿線方法：1：使用html標籤<s>111111111111</s>;2:text-decoration:line-through;

　　8.解決透明度兼容問題：

　　　　解決辦法1:filter:alpha(opacity=90);opacity: .9;(主要針對ie)

      　　　　　　2:  filter:alpha(opacity=50);           -moz-opacity:0.5;          -khtml-opacity: 0.5;           opacity: 0.5;   

　　9.ie兼容border-radius問題：        

　　　　 解決辦法1：如此在須要圓角的css中引用文件behavior: url("ie-css3.htc")，其中ie-css3.htc須要與html文件在同一目錄下

　　　　　　　　　　#div1{border: 1px solid red;width: 200px;height: 200px;margin:20px; behavior: url("ie-css3.htc");

　　　　　　　　　　border-radius: 20px;position: relative;z-index: 1000;} <div id="div1"></div>  

　　　　解決辦法2：引用PIE.htc同上；  

　　　　解決辦法3：使用圖片代替；

　　10.ie中a標籤點擊後虛線問題:  

　　　　解決辦法：a{outline：none；border：none；}

　　11.標籤最低高度設置min-height不兼容

　　　　解決辦法：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; 　　　　　　　　　　                          overflow:visible;}

　　12.還有一些頁面在ie（6-8）下有微小的差距，這時我通常選用css hack來進行微調

　　　　

　　　　　　IE6：（只是ie6識別）

　　　　　　　　_selector{property:value;}

　　　　　　　　selector{property:value;property:value !important;} //IE6 不支持同一選擇符中的 !important

　　　　　　IE7：（只是ie7識別）

　　　　　　+selector{property:value;}

　　　　　　IE8：（只是ie8識別）

　　　　　　selector{property:value\0;}

　　　　　　IE6 & IE7：（只是ie6與ie7識別）

　　　　　　*selector{property:value;}

　　　　　　IE6 & IE7 & IE8：：（只是ie6，ie7，ie8識別）

　　　　　　selector{property:value\9;}

 

   解決瀏覽器兼容性問題，仍是從三個方面入手：html部分、css部分、js部分。       一、html部分       a、最突出也是最容易想到的就是高版本的瀏覽器用了低版本的瀏覽器沒法識別的元素，從而致使不能解析。這點主要體如今html5的新標籤上       解決辦法是：htmlshim框架可讓低於IE9的瀏覽器支持html5       b、img的alt屬性，在圖片不存在的狀況下，各瀏覽器的解析不一致       在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字       c、ul標籤內外邊距問題       ul標籤在IE6\IE7中，有個默認的外邊距，可是在IE8以上及其餘瀏覽器中有個默認的內邊距       二、css部分：       a、css的hack問題：主要針對IE的不一樣版本，不一樣的瀏覽器的寫法不一樣       IE的條件註釋hack：       <!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->          <!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->       b、IE6雙邊距問題：IE6在浮動後，又有橫向的margin，此時，該元素的外邊距是其值的2倍       解決辦法：display:block;       c、IE6下圖片的下方有空隙       解決方法：給img設置display:block;       d、IE6下兩個float之間會有個3px的bug       解決辦法：給右邊的元素也設置float:left;       e、IE6下沒有min-width的概念，其默認的width就是min-width       f、IE6下在使用margin:0 auto;沒法使其居中       解決辦法：爲其父容器設置text-align:center;       g、 被點擊事後的超連接再也不具備hover和active屬性       解決辦法:按lvha的順序書寫css樣式       h、在使用絕對定位或者相對定位後，IE中設置z-index失效，緣由是由於其元素依賴於父元素的z-index，可是父元素默認爲0， 子高父低，因此不會改變顯示的順序       i、IE6下沒法設置1px的行高，緣由是由其默認行高引發的       解決辦法：爲期設置overflow:hidden;或者line-height:1px;       三、js部分       a、標準的事件綁定方法函數爲addEventListener，但IE下是attachEvent；       b、事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，可是最後的結果是將IE的標準定爲標準       c、咱們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。而且獲取目標元素的方法也不一樣，標準瀏覽器是event.target，而IE下是event.srcElement       d、在低版本的IE中獲取的日期處理函數的值不是與1900的差值，可是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值。          好比：var year= new Date().getYear();       e、ajax的實現方式不一樣，這個我所理解的是獲取XMLHttpRequest的不一樣，IE下是activeXObject       f、IE中不能操做tr的innerHtml       g、得到DOM節點的父節點、子節點的方式不一樣       其餘瀏覽器：parentNode  parentNode.childNodes       IE：parentElement parentElement.children