上线测试也有一段时间了，由于自己的懒，所以自开发到现在，都没有对网站做过浏览器兼容性测试。一直都是在ie6环境下浏览，也没有发现什么问题。今天偶然地在多个链接博客中发现关于ie与firefox浏览效果有一些出入，所以也就抽空安装了个firefox，不看不知道，看了真是吓了我一跳，在firefox下浏览，首页变得面目全非了。主要是以下几个问题：

　　1.页面及相关元素不能居中(直接采用text-align方式做的)
　　2.各块元素内容被撑开
　　3.多种元素的边距有误差，内容不整齐。
　　4.<li>列表符号和边距
　　5.用js写的调用已设定id的div不能正常显示。

　　1.从整体来看，我先从第2条开始，因为内容被撑开，而相应的box却保持原大小，所以判定应该是box高度设定的原因。果然，通过把height:xxx px修改为height:auto内容和box就都自动扩展开，撑开问题解决。不过这也真是麻烦啊，当内容的高度大于box设定的高度时，内容就超出box界外了，所以现在只能把box高度设定为自动，但是当内容过少时，box的高度也就很小了，整体来看，不太好看啊，不知道有没有什么更好的解决办法。

　　2.接着解决居中问题，由于此前没有遇到过此问题，查看了css也没觉得哪里异常，所以只能借助google了。果然，一搜索就有结果了，下面是大概的解决办法：

·使用自适应边界（auto margin）

　　水平居中任意元素的首选办法是使用边界（margin）性质（property），并把左右之值设置为auto。但你必须为box块指定一个宽度。

div#box {
margin-left: auto;
margin-right: auto;
width: 100px;
}

　　这个方案在任何当代浏览器上都有效，即使是IE6，前提是在web标准兼容模式下（compliance mode）。不幸的是，它不会在先前版本的IE/Win中工作。我们为此列一个表格：

浏览的自适应边界支持一览表 浏览器     版本     支持
Internet Explorer     6.0, compliance mode     是
Internet Explorer     6.0, quirks mode     否
Internet Explorer     5.5 Windows     否
Internet Explorer     5.0 Windows     否
Internet Explorer     5.2 Macintosh     是
Mozilla     所有当前版本     是
Mozilla Firefox     所有版本     是
Netscape     4.x     否
Netscape     6.x+     是
Opera     6.0, 7.0 Macintosh and Windows     是
Safari     1.2     是

　　尽管受到浏览器支持的限制，大部分设计师还是提倡你尽可能这样做。但我们依然可以使用CSS应付一切情况。

·使用文本排列（text-align）

　　此方案需要使用到text-align性质，应用给body元素并且赋予center的值。

body {
text-align: center;
}

　　它公正地对待各种浏览器，十分彻底，唾手可得。然而，这是赋予文本的性质，它使#box中的文本也居中了。所以，在布局上我们还得做一些额外工作：

div#box {
text-align: left;
}

　　这样才可以把文本的对齐方式返回默认状状态。

·综合边界和文本排列

　　因为文本排列向后兼容，当代浏览器也支持自适应边界，很多设计师把他们结合起来，实现跨浏览器使用。

body {
text-align: center;
}
#box {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}

　　之前我是直接用text-align写的，在IE6下能正常的居中，在firefox下就出错了，没想的加了margin:auto然后指定宽度后就能正常居中了，呵呵。这方法还是不错的。

　　3.由于margin 与padding在不同浏览器下效果不同，所以产生了内容的边距参差不齐，使用了!important指定之后，效果稍微好了点。

　　4.妈的，搞死我了，li列表前的点符号在firefox下怎么弄也去不掉，也不知道怎么设置，下次看到资料再改了。

　　5.网站首页中，我是通过javascript中的document.all.层id.innerhtml的方式来显示页面的，到了firefox中却没法显示了，结果在网上找到了下面的资料，发现原来ie与firefox对id的操作支持还是不一样的：

·HTML 对象的 id 作为对象名的问题
　　
　　(1)现有问题
　　在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
　　
　　(2)解决方法
　　用 getElementById("idName") 代替 idName 作为对象变量使用。

·下面是Javascript的IE和Firefox兼容性的大部分差别：

　　以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox
　　
　　1. document.form.item 问题
　　
　　(1)现有问题：
　　现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行

　　(2)解决方法：
　　改用 document.formName.elements["elementName"]
　　(3)其它
　　参见 2
　　
　　2. 集合类对象问题
　　
　　(1)现有问题：
　　现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
　　(2)解决方法：
　　改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
　　又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
　　(3)其它
　　
　　3. window.event
　　
　　(1)现有问题：
　　使用 window.event 无法在 MF 上运行
　　
　　(2)解决方法：
　　MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
　　原代码(可在IE中运行)：
　　<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
　　...
　　<script language="javascript">
　　function gotoSubmit() {
　　...
　　alert(window.event);　　// use window.event
　　...
　　}
　　</script>
　　
　　新代码(可在IE和MF中运行)：
　　<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
　　...
　　<script language="javascript">
　　function gotoSubmit(evt) {
　　evt = evt ? evt : (window.event ? window.event : null);
　　...
　　alert(evt);　　　　　　 // use evt
　　...
　　}
　　</script>
　　此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
　　
　　4. HTML 对象的 id 作为对象名的问题
　　
　　(1)现有问题
　　在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
　　
　　(2)解决方法
　　用 getElementById("idName") 代替 idName 作为对象变量使用。
　　
　　5. 用idName字符串取得对象的问题
　　
　　(1)现有问题
　　在IE中，利用 eval_r(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
　　
　　(2)解决方法
　　用 getElementById(idName) 代替 eval_r(idName)。
　　
　　6. 变量名与某 HTML 对象 id 相同的问题
　　
　　(1)现有问题
　　在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
　　
　　(2)解决方法
　　在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
　　此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
　　
　　(3)其它
　　参见 问题4
　　
　　7. event.x 与 event.y 问题
　　
　　(1)现有问题
　　在IE 中，event 对象有 x, y 属性，MF中没有。
　　
　　(2)解决方法
　　在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
　　故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
　　event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
　　
　　如果要完全一样，可以稍麻烦些：
　　mX = event.x ? event.x : event.pageX;
　　然后用 mX 代替 event.x
　　
　　(3)其它
　　event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
　　
　　8. 关于frame
　　
　　(1)现有问题
　　在 IE中 可以用window.testFrame取得该frame，mf中不行
　　
　　(2)解决方法
　　在frame的使用方面mf和ie的最主要的区别是：
　　
　　如果在frame标签中书写了以下属性：
　　<frame src="xx.htm" id="frameId" name="frameName" />
　　
　　那么ie可以通过id或者name访问这个frame对应的window对象
　　
　　而mf只可以通过name来访问这个frame对应的window对象
　　
　　例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
　　
　　ie： window.top.frameId或者window.top.frameName来访问这个window对象
　　mf： 只能这样window.top.frameName来访问这个window对象
　　
　　另外，在mf和ie中都可以使用window.top.document.getElementByIdx("frameId")来访问frame标签
　　
　　并且可以通过window.top.document.getElementByIdx("testFrame").src = 'xx.htm'来切换frame的内容
　　
　　也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
　　
　　关于frame和window的描述可以参见‘window与frame’文章
　　
　　以及/test/js/test_frame/目录下面的测试
　　
　　----adun 2004.12.09修改
　　
　　9. 在mf中，自己定义的属性必须getAttribute()取得
　　
　　10.在mf中没有parentElement parement.children，而用parentNode parentNode.childNodes
　　
　　childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
　　
　　一般可以通过node.getElementsByTagName_r()来回避这个问题。
　　
　　当html中节点缺失时，IE和MF对parentNode的解释不同，例如
　　
　　<form>
　　<table>
　　<input/>
　　</table>
　　</form>
　　
　　MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
　　
　　MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
　　
　　11.const 问题
　　
　　(1)现有问题:
　　在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
　　
　　(2)解决方法:
　　不使用 const ，以 var 代替。
　　
　　12. body 对象
　　
　　MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
　　
　　13. url encoding
　　
　　在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
　　
　　frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
　　
　　一般会服务器报错参数没有找到
　　
　　当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
　　
　　一般MF无法识别js中的&
　　
　　14. nodeName 和 tagName 问题
　　
　　(1)现有问题：
　　在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
　　有问题（具体情况没有测试，但我的IE已经死了好几次）。
　　
　　(2)解决方法：
　　使用 tagName，但应检测其是否为空。
　　
　　15. 元素属性
　　
　　IE下 input.type属性为只读，但是MF下可以修改
　　
　　16. document.getElementsByName() 和 document.all[name] 的问题
　　
　　(1)现有问题：
　　
　　在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。