HTML css和js瀏覽器兼容問題

什麼是瀏覽器兼容？

瀏覽器兼容性問題又被稱爲網頁兼容性或網站兼容性問題，指網頁在各類瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。

爲何瀏覽器會存在兼容問題？

同一瀏覽器，版本越老，存在bug越多，相對於版本越新的瀏覽器，對新屬性和標籤、新特性支持越少。

不一樣瀏覽器，核心技術不一樣，標準不一樣，實現方式也有差別，最終呈現出來在大衆面前的效果也是會有差別。

HTML與Css樣式瀏覽器兼容

1、不一樣瀏覽器默認的內外邊距不一樣的問題 

解決： *{margin:0;padding:0;}

2、不一樣瀏覽器水平居中的問題：ie6-7文本居中，嵌套的塊元素也會居中 ，ff /opera /safari /ie8文本會居中，嵌套塊不會居中 

解決： 塊元素設置  margin-left:auto;margin-right:auto 或margin:0 auto; 或外層嵌套div設置<div align=」center」></div>

浮動塊元素的居中：<div style="margin:0px auto;">

<div style="float:left;"></div></div>

3、不一樣瀏覽器垂直居中的問題 ： 在瀏覽器中 想要垂直居中，設置vertical-align:middle; 不起做用。例如：ie6下文本與文本輸入框對不齊，需設置vertical-align:middle，可是文本框的內容不會垂直居中 

解決： 給容器設置一個與其高度相同的行高 line-height:與容器的height同樣

4、不一樣瀏覽器關於高度問題 ： 若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。 若是設定了高度，內容過      多時，ie6下會自動增長高度、其餘瀏覽器會超出邊框

解決： 1.設置overflow:hidden; 2.高度自增height:auto!important;height:100px;

  

5、IE6 默認的div高度問題： ie6默認div高度爲一個字體顯示的高度，在ie6下div的高度大於等於一個字的高度，所以在ie6下定義高度爲1px的容器，顯示的是一個字體的高度

解決：爲這個容器設置下列屬性之一 1、設置overflow:hidden; 2、設置line-height:1px; 3、設置zoom:0.08 

 6、IE6 最小高度(寬度)的問題： ie6不支持min-height、min-width屬性，默認height是最小高度，width是最小寬度。

解決： 使用ie6不支持但其他瀏覽器支持的屬性!important。 設置屬性min-height:200px; height:auto !important; height:200px;

7、td高度的問題 ： table中td的寬度都不包含border的寬度，可是oprea和ff中td的高度包含了border的高度 

解決： 設置line-height和height同樣。在ie中若是td中的沒有內容，那麼border將不會顯示

8、div嵌套p時，出現空白行問題：div中顯示<p>文本</p>，ff、oprea、Chrome：top和bottom都會出現空白行，可是在ie下不會出現空白行。

解決：設置p的margin:0px，再設置div的padding-top和padding-bottom

9、IE6-7圖片下面有空隙的問題：塊元素中含有圖片時，ie6-7中會出現圖片下有空隙

解決：（1）、在源代碼中讓</div>和<img>在同一行

        （2）、將圖片轉換爲塊級對象display:block; 

        （3）、設置圖片的垂直對齊方式  vertical-align:top/middle/bottom 
        （4）、改變父對象的屬性，若是父對象的寬、高固定，圖片大小隨父對象而定，那麼能夠對父元素設置： overflow:hidden;  

        （5）、設置圖片的浮動屬性  float:left;

10、IE6雙倍邊距的問題 ： ie6中設置浮動，同時又設置margin時，會出現雙倍邊距的問題 例float:left;width:100px;margin:0 100px;  

解決： 設置display:inline;

11、IE6兩個層之間3px的問題： 左邊層採用浮動，右邊沒有采用浮動，這時在ie6中兩層之間就會產生3像素的間距 

解決： 1、右邊層也採用浮動  float  2、左邊層添加屬性  margin-right:-3px;

12、IE6 子元素絕對定位的問題： 父級元素使用padding後，子元素使用絕對定位，不能精肯定位 

解決： 在子元素中設置  _left:-20px; _top:-1px;

13、顯示手型cursor:hand 問題： ie6/7/8、opera  都支持 ，可是safari 、 ff 不支持 

解決： 寫成 cursor:pointer;  (全部瀏覽器都能識別) 

14、IE6-7 line-height失效的問題： 在ie中img與文字放一塊兒時， line-height不起做用  

解決：都設置成float； 

15、td自動換行的問題 ： Table寬度固定，td自動換行 

解決： 設置Table的table-layout:fixed，td的word-wrap:break-word

16、子容器浮動後，父容器擴展問題： 子容器都float之後，父容器沒有設定高度,父容器將不會擴展

 解決： 只須要添加一個clear:both的div，代碼以下：

 <div style="border:1px solid #333;width:204px"> 
    <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div> 
    <div style="width:100px;border:1px solid #333; float:left;">子容器b</div> 
    <div style="clear:both"></div>

 </div>

17、透明png圖片會帶背景色問題： 在ie6下透明的png圖片會帶一個背景色 

解決： 

background-image: url(icon_home.png);/* 其餘瀏覽器 */ 

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */ 
_background-image: none; /* IE6 */ 

18、list-style-position默認值的問題： ie下list-style-position默認爲inside,   firefox默認爲outside 

解決： css中指定爲outside便可解決兼容性問題

19、 list-style-image準肯定位的問題：  li前設置圖片時，圖片與其後的文字對齊問題 

解決：1、採用背景定位 和 字符縮進的方法 background:url() no-repeat left center; text-index:16px;

         2、採用相對定位方法 li 設置list-style:url(); li的子元素position:relative;top:-5px; 

 20、ul標籤默認值的問題 ： ul標籤在ff中默認是有padding值的,而在ie中只有margin有值

 解決： 定義ul{margin:0;padding:0;}就能解決大部分問題 

21、IE中li指定高度後，出現排版錯誤 問題： 在ie下若是爲li指定高度可能會出現排版錯位

解決： 設置line-height

22、ul或li浮動後，顯示在div外 問題： div中的ul或li設置float之後，都不在div中 

解決： 必須在ul標籤後加<div style="clear:both"></div>來閉合外層div 

23、ul或者li浮動後，margin變大 問題： ul設置 float後，在ie中margin將變大 

解決： 設置ul的display:inline，li的list-style-position:outside；li浮動問題設置li的display:inline

24、嵌套使用ul、li的問題：  ie的bug，嵌套使用ul、li時，裏層的li設置float之後，外層li不設置float, 裏面的ul頂部和它外面的li老是有一段間距 

解決： 設置裏面的ul的zoom:1

 

25、 IE6-7 li底部有3px的問題 ：這個bug產生的充要條件是li的子元素浮動而且li設置瞭如下CSS屬性之一：width、height、zoom、padding-top、padding-bottom、                                                    margin-top、margin-bottom。

解決：

（1）、div設置clear:left|both，這時li不能設置width、height、zoom。  

（2）、li設置float:left，這時li能夠設置width、height、zoom。  

（3）、li設置clear:left|both，這時li不能設置width、height、zoom。

（4）、IE6/IE7的這個Bug能夠經過給li中的div設置vertical-align:top|middle|bottom解決。 

26、IE6 垂直列表間隙的問題：  li中有a且設置display:block時，ie6中列表間會出現空隙 

解決： 1、li中加display:inline; 2、li使用float  而後 clear:both; 3、給包含的文本末尾添加一個空格 4、設置width 

27、IE6 列表背景顏色失效的問題 ： 當父元素設置position:relative;時，在ie6中第一個ul、ol、dl的背景顏色失效

 解決： ul、ol、dl 都設置爲position:relative;

28、IE6-7 列表背景顏色失效的問題2 ： 作橫向導航欄時，ul設置爲float且有背景色，li設置爲float。ie6-7背景顏色失效 

解決： 不少ie的bug均可以經過觸發layout來解決 ul添加屬性 1、height:1%; 2、float:left; 3、zoom:1;

29、列表不能換行的問題 ：  li設置爲浮動，後面的li緊隨其後，不能換行

 解決： 1、爲這個ul定義合適的寬高 2、給包含這個ul 的父div定義合適的寬高。

30、超連接訪問事後hover樣式不出現的問題 ： 擊超連接後，hover、active樣式沒有效果

解決： 改變CSS屬性的排列順序: L-V-H-A

31、 禁用中文輸入法的問題 ： 不能在輸入框中輸入漢字 

解決： 只在ie系列 和ff中有效 ime-mode:disabled    (但能夠粘貼) 禁用粘貼： onpaste="return false"

32、除去滾動條的問題 ： 隱藏滾動條 

解決： 1、只有ie6-7支持<body scroll="no"> 2、除ie6-7不支持 body{overflow:hidden} 3、全部瀏覽器 html{overflow:hidden}

33、讓層顯示在FLASH之上：

解決：把FLASH設置透明 1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>

34、去除連接虛線邊框的問題 ： 當點擊超連接後，ie6/7/8  ff會出現虛線邊框 ,而opera、safari沒有虛線邊框

 解決： ie6/7中 設置爲a { blr:expression(this.onFocus=this.blur()) }  ie8 和 ff 都不支持expression  在ie8 、ff中設置爲  :focus { outline: none; }

35、css濾鏡的問題 ： css濾鏡只在ie中有效，Firefox, Safari(WebKit), Opera只可以設置透明，它們不支持濾鏡filter，沒法實現圖片切換中間變換的效果，只能經過透明度來 設置。 

解決： ff中設置透明度   -moz-opacity:0.10;  opacity:0.6; ie中只設置filter:alpha(opacity=50); 時，ie6-7失效，還要設置 1、zoom:1;  2、width:100%; 

36、IE6背景閃爍的問題：連接、按鈕用CSS sprites做爲背景，在ie6下會有背景圖閃爍的現象。緣由是:IE6沒有將背景圖緩存，每次觸發hover的時候都會從新加載

解決：用JavaScript設置ie6緩存這些圖片： document.execCommand("BackgroundImageCache ",false,true);

37、ff、chrome絕對定位無效 問題： 在IE給td設置position:relative，而後給它包含的一個容器使用position:absolute進行定位是有效的，但在FF和Chrome下卻不能夠。 

解決：設置td的display:block。

38、IE6 絕對定位的問題 問題： 

<div style="position:relative;border:1px solid orange;text-align:center;"> 
<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div> 
<a href="#" title="vapour的blog">內容</a> 

</div>

解決：left的定位錯誤問題 
1、給父層設置zoom:1觸發layout。  2、給父層設置寬度width   
bottom的定位錯誤問題 
1、給父層設置zoom:1觸發layout。  2、給父層設置高度height 

39、float的div閉合的問題：  

例如：<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >這裏的NOTfloatC並不但願繼續平移，而是但願往下排。(其中floatA、floatB的屬性已經設置爲 float:left;)    
這段代碼在IE中毫無問題，問題出在其餘瀏覽器中。緣由是NOTfloatC並不是float標籤，必須將float標籤 閉合。

解決：

在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div必定要注意位置，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會 產生異常。而且將clear這種樣式定義爲爲以下便可：.clear{ clear:both;} 

40、選框、複選框與後面的文字對不齊 問題：  

 解決： 
.align{font-size:12px;} 
.align input{ display:block; float:left;} 
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;} 

不足之處：設置padding後高度和寬帶都會增長

41、邊框重疊說明 說明： 

爲 table、td 都指定了邊框後，而後使用border-collapse:collapse讓邊框重疊，能夠看出在發生重疊時，Firefox 是用 td 覆蓋 table 的，而 IE 是用 table 覆蓋 td 的。使用時候須要注意。

42、設置td padding的說明：

設置td的padding之後高度和寬帶都會增長,padding-left和padding-right的效果都同樣增長了td的寬帶，可是padding-top和padding-bottom的效果不同。最好不要使用td的ding-top和padding-bottom

43、使一個層垂直居中於瀏覽器中 說明：

 使用百分比絕對定位,與外補丁負值的技巧,負值的大小爲其自身寬度高度除以二 

div {  position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;  width:200px; height:200px; border:1px solid red;  }

44、行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug，IE6裏的間距比超過設置的間距

解決：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

4五、高度塌陷問題

發生高度塌陷緣由 ：父元素未設置高度，子元素髮生浮動

（1）給父元素添加聲明   overflow：hidden

（2）在最後一個浮動元素下方添加div並給該元素下方添加div，並給該元素添加聲明

（clear：both；height:0;overflow:hidden）;

(3) 萬能清除浮動法：父類選擇器：after{content：「.」clear:both;display:block;height:0:overflow:hidden;visibility:hidden;}

原生js瀏覽器兼容性問題

1.HTML對象獲取問題

FireFox：document.getElementById(「idName」);

ie:document.idname或者document.getElementById(「idName」).

解決辦法：統一使用document.getElementById(「idName」);

2.const問題

說明:Firefox下,可使用const關鍵字或var關鍵字來定義常量;

IE下,只能使用var關鍵字來定義常量.

解決方法：統一使用var關鍵字來定義常量.

3.event.x與event.y問題

說明:IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

解決方法：使用mX(mX   =   event.x   ?   event.x   :   event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href問題

說明:IE或者Firefox2.0.x下,可使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location.

解決方法：使用window.location來代替window.location.href.

5.frame問題

如下面的frame爲例：

1	<frame  src=」xxx.html」  id=」frameId」  name=」frameName」  />

(1)訪問frame對象：

IE:使用window.frameId或者window.frameName來訪問這個frame對象.frameId和frameName能夠同名。

Firefox:只能使用window.frameName來訪問這個frame對象.

 另外，在IE和Firefox中均可以使用window.document.getElementById(「frameId」)來訪問這個frame對象.

(2)切換frame內容:

在 IE和Firefox中均可以使用window.document.getElementById(「testFrame」).src   =   「xxx.html」或window.frameName.location   =   「xxx.html」來切換frame的內容.

若是須要將frame中的參數傳回父窗口(注意不是opener,而是parent   frame)，能夠在frame中使用parent來訪問父窗口。例如：parent.document.form1.filename.value=」Aqing」;

6.模態和非模態窗口問題

說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.

解決方法：直接使用window.open(pageURL,name,parameters)方式打開新窗口。

若是須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口.

例如：var   parWin   =   window.opener;   parWin.document.getElementById(「Aqing」).value   =   「Aqing」; 

7.firefox與IE的父元素(parentElement)的區別

IE：obj.parentElement

firefox：obj.parentNode

解決方法:   由於firefox與IE都支持DOM,所以使用obj.parentNode是不錯選擇.

8.document.formName.item(」itemName」) 問題

問題說明：IE下，可使用document.formName.item(」itemName」) 或document.formName.elements [「elementName」]；Firefox 下，只能使用document.formName.elements[「elementName」]。

解決方法：統一使用document.formName.elements[「elementName」]。

9.集合類對象問題

問題說明：IE下，可使用 () 或 [] 獲取集合類對象；Firefox下，只能使用 [ ]獲取集合類對象。

解決方法：統一使用 [] 獲取集合類對象。

10.自定義屬性問題

問題說明：IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute() 獲取自定義屬性；Firefox下，只能使用getAttribute() 獲取自定義屬性。

解決方法：統一經過getAttribute() 獲取自定義屬性。

11.input.type屬性問題

問題說明：IE下input.type屬性爲只讀；可是Firefox下input.type屬性爲讀寫。

解決辦法：不修改input.type屬性。若是必需要修改，能夠先隱藏原來的input，而後在一樣的位置再插入一個新的input元素。

12.event.srcElement問題

問題說明：IE下，even對象有srcElement屬性，可是沒有target屬性；Firefox下，even對象有target屬性，可是沒有srcElement屬性。

解決方法：使用srcObj = event.srcElement ?event.srcElement : event.target;

若是考慮第8條問題，就改用myEvent代替event便可。

13.body載入問題

問題說明：Firefox的body對象在body標籤沒有被瀏覽器徹底讀入以前就存在；而IE的body對象則必須在body標籤被瀏覽器徹底讀入以後才存在。

[注] 這個問題還沒有實際驗證，待驗證後再來修改。

[注] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本能夠訪問在腳本以前已經載入的全部對象和元素，即便這個元素尚未載入完成。

14.事件委託方法

問題說明：IE下，使用document.body.onload = inject; 其中function inject()在這以前已被實現；在Firefox下，使用document.body.onload = inject();

解決方法：統一使用document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 這裏是代碼 */}

[注意] Function和function的區別。

15.Table操做問題

問題說明：ie、firefox以及其它瀏覽器對於 table 標籤的操做都各不相同，在ie中不容許對table和tr的innerHTML賦值，使用js增長一個tr時，使用appendChild方法也無論用。

解決方法：//向table追加一個空行：

var row = otable.insertRow(-1);var cell = document.createElement(「td」);cell.innerHTML = 「」;cell.className = 「XXXX」;row.appendChild(cell);[注] 因爲俺不多使用JS直接操做表格，這個問題沒有碰見過。建議使用JS框架集來操做table，如JQuery。