轉自：http://xufive.blog.163.com/blog/static/1723261682011971045158/
這是一篇工作筆記，在接下來的一段時期內，可能會持續更新。
1. 在Firefox瀏覽器中，style.visibility = "visible"無效的問題
很多人都遇到過這個問題：style.visibility 設置爲 hidden 時有效，visible 卻無效。網上搜索一下，答案真是五花八門，有人說，用inline 替換 visible 可以，有人說，style.display 有效。我的發現似乎沒那麼複雜。一開始，我的代碼是這樣的：
onClick="this.style.visibility = 'visible'"
IE和Chrome可以工作，Firefox不起作用。後來改爲調用函數，仍然無效：
onClick="ShowLoginFrame()"
再後來，寫得更規範一下，呵呵，居然可以工作了！
onClick="javascript: ShowLoginFrame()"
2. Alpha濾鏡的CSS兼容性
filter:Alpha(opacity=80);
在IE6環境中，可以工作，IE8及更高版本必須使用：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
Chrome和Firefox則使用這樣的濾鏡：
opacity: .8;
這。。。讓我等，情何以堪！
3. style.left（style.top）是用來賦值的，若想獲取位置，則使用offsetLeft（offsetTop）
假如style.left（style.top）已經被賦值了，在IE環境中是可以隨便拿來用的，但Chrome和Firefox不行。通用的方法是：
document.getElementById(idStr).offsetLeft 或者document.getElementById(idStr).offsetTop
4. 給網頁元素指定位置
cover.style.left= 240
這行代碼在IE裏面是沒有問題的，但Chrome和Firefox不這樣認爲。後面加上px纔是一個各方都認可的方案。
cover.style.left= 240px
5. Firefox不能直接使用元素的id？
我發現Firefox似乎不允許使用直接使用元素的id，你必須通過 document.getElementById 操作這個元素。IE和Chrome則不存在這個問題。反覆驗證，的確如此。怪哉！
6. 關於高度和寬度
通常，我需要兩個高度（或者寬度）：可視區域的高度（或者寬度）和網頁內容的高度（或者寬度）。
document.documentElement.clientHeight
Firefox/Chrome/IE 對上面這一句的解釋保持一致：表示可視區域的高度。如果把clientHeight 換成offsetHeight的話，Firefox/Chrome則認爲這是網頁內容的高度，IE仍然堅持原先的觀點。如果把document.documentElement替換爲body的話，不管是clientHeight 還是offsetHeight，Firefox/Chrome/IE 又保持了一致的觀點：這是網頁內容的高度。
7. 獲取表單信息
IE和Chrome瀏覽器中，使用document.loginForm.account.value就能讀到表單loginForm裏面的account的值，唯有Firefox不可以。Firefox認可的標準寫法是：
document.loginForm.elements["account"].value
事實上，IE和Chrome也兼容這個寫法。唉！連人家IE和Chrome都遷就Firefox了，我等還有什麼可說的呢？
8. 不可理喻的規定：Firefox中的submit按鈕
習慣在 button 的 onClick 事件上綁定行爲，即使這個行爲是提交表單，我也很少使用 submit 按鈕。現在，要考慮兼容Firefox的話，就必須改變這一習慣了，因爲，沒有submit 按鈕的話，document.loginForm.submit() 居然不能被執行！可是，要想在 submit 之前做點什麼的話，比方說，數據校驗，那就太不方便了。蒼天哪，究竟還有沒有天理啊。。。
萬幸的是，使用 <input type='submit' style='display:none' /> ，還可以繼續保留我的一些個人風格。
9. Firefox中file類型的input如何調整長度？
<input type="file" name="瀏覽" value ="" style=" width:320px;">
很顯然，我想設置這個input長度爲320點。IE的效果和我想象的一樣；Chrome的瀏覽按鈕跑到了左側，並且是在輸入框中，雖然怪異，但長度是我期望的；Firefox卻根本不認這一套。實驗了半天，得到了這養一個怪異的結果：
<input type="file" name="瀏覽" value ="" size="35" style="width:320px;">
size沒有單位，也不是百分比，數值也很怪異，可是，只有這麼寫，才能同時被三種瀏覽器兼容！
10. 兼容的XMLHttpRequest
以前還真沒怎麼考慮過 XMLHttpRequest 的兼容性，只用 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") 包打天下，現在看來真的行不通了。讀了很多代碼之後，終於有了自認爲最簡潔的兼容方案：
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
11. xmlHttp.responseText 中文亂碼？交給PHP好了！
xmlhttp 默認的編碼似乎是UTF-8，如何改變，不得而知。如果 xmlHttp 傳遞的信息包含中文，這意味着，服務端必須能夠處理UTF-8編碼的字符串。可是，很多時候，整個系統（包括數據庫）使用的是GB2312編碼，在哪兒完成這個編碼轉變呢？PHP5爲我們提供了極大的便利：
From UTF-8 To GB2312: iconv("UTF-8", "GB2312", string)
From GB2312 To UTF-8: iconv("GB2312", "UTF-8", string)
12. 兼容insertRow 和insertCell 的方案
網絡上關於這個兼容性的問題，有很多錯誤的說法。IE和Firefox的最大分歧在於，前者允許insertRow() 和insertCell() 不帶任何參數，表示插入到最後，後者要求insertRow 和insertCell 必須帶任何參數，用-1表示插入到最後。同理，deleteRow 也是如此。
爲新插入的Row和Cell設定屬性，在兼容性上也有一些麻煩，需要特別注意。
newRow = document.getElementById('TableId').insertRow(-1);
newRow.setAttribute('height', 24);
newRow.style.backgroundColor = "#FFFFFF";
newCell = newRow.insertCell(-1);
newCell.align = 'center';
newCell.innerHTML = '<input type="text" name="name" value ="">';
13. submit之後的刷新問題：parent.location.reload
submit 之後刷新網頁，會遇到“是否再次提交”一類的詢問，這個問題我一直沒找到解決方案。現在，又遇到了新的問題：在iframe 中 submit，然後使用 parent.location.reload() 刷新 parent 頁面，IE和Chrome沒問題，Firefox卻要求重新發送。無奈之下，重新學習了location.reload()的用法，發現這個方法是有一個bForceGet參數，默認值false，難道，意思是不強制以 get 方式刷新？換成 parent.location.reload(true)，哈哈，成功！