瀏覽器兼容性問題基本匯總
Javascript
1.HTML對象獲取問題
FF: document.getElementById('idName')
IE:document.idName 或者document.getElementById('idName')
解決：document.getElementById('idName')
2.contst問題
FF:const或 var 關鍵字定義常量
IE：只能用var定義常量
解決：使用var關鍵字定義常量
3.event.x與event.y問題
FF：event對象有 pageX,pageY屬性,但是沒有x,y屬性.
IE：event對象有x,y屬性,但是沒有pageX,pageY屬性;
解決：使用三目運算符，mX（?mX =event.x ? event.x : event.pageX;）
4.window.location.href問題
說明：IE 或Firefox2.0.x下。可以使用window.location或window.location.href
Firefos1.5.x下，只能使用window.location
解決：使用window.locaiton代替window.location.href
5.frame 問題
例：
<frame src=”xxx.html” id=”frameId” name=”frameName” />
訪問iframe對象
FF:只能用window.frameName來訪問frame對象
IE：使用window.frameId或者window.frameName來訪問這個frame對象.frameId和frameName可以同名。
總結：在IE和Firefox中都可以使用window.document.getElementById(“frameId”)來訪問這個frame對象.
切換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”;
如果從父窗口調用子窗口的方法需要用到Jquerycontents() 方法，
iframe父子窗口方法調用詳情Jquery parents()和contents()
6.模態框和非模態框窗口問題
IE：可以使用showModalDialog和showModelessDialog打開模態框和非模態框窗口
FF:不能使用上用上述方法
解決：使用window.open(URL,name,parnmeters)方式打開新窗口
例如：var
parWin=window.opener;parWin.document.getElementById('aa').value='aValue'
7.父元素（parnetElement）區別
FF： obj.parnetNode
IE : obg.parnetElement
解決方法：FF 和IE 都支持DOM ，所以使用obj.parnetNode
8.自定義屬性問題
FF:只能用 getAttribute()獲取自定義屬性
IE：可以使用獲取常規屬性的方法（.屬性名）來獲取自定義屬性，也可以用getAttribute()
解決：用 getAttribute()獲取自定義屬性
9.input.type屬性
FF :input.type屬性為讀寫
IE：input.type屬性只讀
解決：不修改input.type屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一個新的input元素。
10.event.srcElement問題
FF： event對象有target屬性，沒有srcElement屬性
IE： event對象沒有target屬性，有srcElement屬性
解決：使用srcObj = event.srcElement ?event.srcElement : event.target;、
11.事件委托問題
FF:使用document.body.onload = inject();
IE:document.body.onload = inject;其中function inject()在這之前已被實現
解決：統一使用 document.body.onload=new Function('inject()'); 或者document.body.onload = function(){/* 這里是代碼 */}
Function 和 function 區別
12.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)
建議使用JQ操作table
13.對象寬高賦值問題
FF：obj.style.height=imgObg.height語句無效，使用obj.css('height',value)
Css
1.不同瀏覽器標簽默認內外補丁不同
說明：不同標簽在不加樣式控制下，各自的margin 和padding差異較大。
解決：css 通配符格式化標簽內外補丁為0，*{margin:0;padding:0}
2.塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
解決：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
3.float的div閉合;清除浮動;自適應高度
清楚浮動
例如：
<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>
這里的NOTfloatC并不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為float:left;)
這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在<div class=”floatB”><div class=”NOTfloatC”>之間加上<div class=”clear”>這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}
自適應高度
作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應，要在wrapper里面加上overflow:hidden; 當包含float的box的時候，高度自適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
排版
我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div后面做一個統一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設置成float,所以我們應該這樣解決：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一個float left而寬度是100%的DIV解決之。
float閉合
將以下代碼加入Global CSS 中,給需要閉合的div加上class=”clearfix” 即可,屢試不爽。
/* Clear Fix */
.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者這樣設置：.hackbox{ display:table; //將對象作為塊元素級的表格顯示}
4.透明度的兼容CSS設置
/* CSS hack*/
IE6認識的hacker 是下劃線_ 和星號 *
IE7 遨游認識的hacker是星號 *
例如：
height:300px;*height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt，
所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；
5.BOX模型
box.style{width:100;border 1px;}
ie理解為box.width = 100
ff理解為box.width = 100 + 1*2 = 102 //加上邊框2px
解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反， IE不能識別!important這個屬性，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}
6.元素水平居中
FF:margin:0 auto;
IE: 父級{ text-align:center; }
9.Div的垂直居中問題
vertical-align:middle; 將行距增加到和整個DIV一樣高：line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行。
