转自：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)，哈哈，成功！