第一张为FF3，第二张为IE6，第三张为IE7，第四张为IE8.

FF3跟IE8下正常的效果，在IE6,7下却如此怪异，艹。

————-

似乎这样的问题很经常发生，这次要寻根究底找出问题原因跟解决的办法来。

IE6下默认的字体尺寸大致在 12 – 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。

要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style=”height: 6px; font: 0px Arial;”></div> 或者 <div style=”height: 6px; overflow: hidden;”></div> 都可以阻止 IE 的自作聪明。

该问题在 IE7 / Firefox /Opera 下均不存在。

闲话少说，来看看chromeFrame。关于chromeFrame怎么使用，大家google搜一下已经一大把了，官方网站也可以看介绍。在浏览的地址前面加上cf:就可以启用chromeFrame来浏览，当然还是相当不方便，达人们已经给出了用强制全部用chromeFrame打开页面的方法。其实说实话我觉得如果全部都改成用cf来浏览，直接用chrome就行了，折腾这个就没啥意思了，整一个带着IE外壳的chrome了。不过对于web开发者来说，chromeFrame似乎没有什么意义。。因为机子上面装的ie基本上只有测试的时候才开起来看看效果用。

网页本身也可以具备自动开启Chrome Frame的功能，网站开发者只要在自己的网页代码顶部增加一条这样的Meta标签即可：<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>。官方上面还介绍了更多相关的内容，比如说可以嗅探chromeFrame的Javascript等，可以自己到官网去看。

我在自己博客上面尝试了一下添加meta的方式，实验结果貌似不好，在IE8下操作起来感觉有点怪异，有一些奇怪的轻微闪烁的现象。可能页面渲染出问题了，操作了一段时间之后，IE8直接报错崩溃了。汗。。看来这个特性现在还是不用的好。

chromeFrame体积相当的庞大，chrome浏览器大概60M，但是chromeFrame却高达77.7M。从文件大小来看，可以知道想要强X IE，显然相当费力。顺便一提：opera 9 大概才7M，而10也才20M左右。firefox插件跟数据搞得多的话，像我的可携带的FirefoxPortable已经190M了。safari 4 大概60M。IE 8多大不是很清楚，IE8的安装包是16M。

来看看，装了chromeFrame的IE，性能有多强劲，自己上acid3的测试网页，亲自去玩一把测试，截图2张，跟新闻报道的分数完全一致。

IE8，悲情的20分：

装了chromeFrame插件的IE8，用cf模式来浏览，直接达到chrome的水准了，100！

既然进了acid3网站，就顺手多做几个测试：

IE6跟IE7….我都不好意思说了：

IE7:

firefox3.5 我一直都在用的，表现也不错：

safari4 ，acid3也是100，跟chrome同样，webkit引擎：

opera 9.6，才85，居然没过关，汗，我一直觉得opera性能速度都不错，感觉仅次于chrome。

opera 10 beta，100满分过关就不再贴图了，看来9.6到10改进还是挺大的。

这个bug只存在于IE6。google搜索一番，目前对于此bug没有明确的定论，难以重现，但是经常的情况就是，有些脚本执行，IE6需要采用setTimeout延迟加载才可以正常的执行。我个人猜测的像类似iframe这些动态加载的项，可能会造成IE6出现这个问题，或者像不同的frame框架同时加载执行Javascript也可能导致。

解决的方法就是将你要执行的Javascript，放在setTimeout(”,0)里面，这样IE6就可以正常运行了。

此外，调试的时候还发现，如果在代码中加入一个alert，Javascript也会被执行，但是去掉alert代码又不会执行，IE6真是强大的存在啊。

1.a

链接标记，这个常用得不行，地球人都知道。这里要说的是href属性。说到href，地球人都笑了，a里面几乎都有href属性不是?这里要说的是一个特殊的属性值，href=”mailto:fangyuqiang@gmail.com”，比较了解html又笑了，这个就是可以打开电脑上默认的邮件发送工具给fangyuqiang@gmail.com发送邮件，老式的网站很经常出现在联系我们的那个按钮上面的嘛。实际，更深一层的，href属性里面甚至是可以指定要发送的邮件的标题跟正文内容，甚至抄送的人都可以指定，这个知道的人就不多了吧？

具体的使用方法：
可以使用形如”mailto: ddsd@gmail.com?cc=test@test.com&bcc=test1@test1.com&subject=一些冷门但是关键时刻很有用的html标签与属性&body=这篇文章可以看看哦“这样的语句，在这个语句中第一个功能以”?”开头，后面的每一个功能以”&”开头。当用鼠标单击这个邮件地址时，在随后打开的邮件编辑窗口中，我们将看到在收件人地址栏中自动填写上了ddsd@gmail.com，在抄送地址栏中自动填上了test@test.com，在暗送地址栏中自动填写上了test1@test1.com，在主题栏中自动填写上了”‘一些冷门但是关键时刻很有用的html标签与属性”，在信件的正文部分将自动出现”这篇文章可以看看哦”这样的文字。注意，多个邮件地址可以用分号;隔开，这样就可以同时发送给多个地址。

这个有啥用呢？在有些情况下，假设你做了一个按钮，希望用户点击按钮后会给你发送邮件提建议，你就可以这么做，把标题内容体都先写好，这样用户体验会好得多。

http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2

另外，mailto这样的地址也是可以出现在form的action里面的。也许更方便：

http://www.w3school.com.cn/tiy/t.asp?f=html_form_mail

此外，<a>的rel跟rev属性，虽然现在没有浏览器支持，我觉得也是值得注意的。尤其是rel，为啥呢？虽然浏览器不支持，但是SEO却有用到。有多个主流搜索引擎可以识别这个属性。目前可以用rel=”canonical”来表明内容相同的网页，可以避免被搜索引擎认为是重复内容而导致被屏蔽或者删除索引。

2.abbr与acronym

这2个标记都少用，简单的说，都是定义与显示缩写的。abbr标签貌似IE6不支持。使用这2个标签主要是为了语义化与SEO。哦，对了，还可以炫耀你懂的标签比较多，比如说我的博客最下面的valid XHTML，鼠标移动上去就会显示完整含义。

http://www.w3school.com.cn/tiy/t.asp?f=html_abbracronym

3.area

这是几年前很流行的技术，图像热点链接，点击图像上面不同的部分进入不同的链接，现在使用得比较少了，也没什么人关注了。这里重提下，是因为现在这个标签在webgame的地图上被大量运用，如果你对webgame有兴趣，或许你应该对这个标签的有深入的调研与了解。推荐使用Dreamweaver来学习使用这个标记。

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

4.base

使用myeclipse的童鞋对这个标签应该比较熟悉，因为myeclipse自动生成的html代码会带有这个标签。它可以为页面上的所有链接规定默认地址或默认目标。指定base元素后，页面会根据使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。有时候你需要书写大量的完整的url地址的页面上，并且这些url都是来自同一基准地址的话，就可以应用base标签来指定，后面的url就可以放心的全部采用简单的相对地址。

http://www.w3school.com.cn/tiy/t.asp?f=html_base_test

5.button

有些人搞不清楚button跟input type=“button”，input type=“submit”的区别，对于各自的使用场景不了解。此外，由于不同的场景下不同浏览器对于button的处理也有差异，这个标签看起来简单，却也容易搞糊涂。

<button> 控件 与 <input type=”button”> 相比，提供了更为强大的功能和更丰富的内容，可控制性比较强。但是特别要注意的是：使用button最好指定type属性，因为IE 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”，也就是说，IE下默认的button行为类似input type=”button”，而其他浏览器例如firefox，行为类似input type=”submit”。如果你在表单内部放了一个button标签，只是为了点击调用一个Javascript函数，IE下可能如你所愿，但是firefox下可能把你的表单都提交走了。此外，还有一点，提交表单的时候，IE 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。

http://www.w3school.com.cn/tiy/t.asp?f=html_button_test

6.caption

定义表格的标题，比较少用，只是为了语义化，以及可用性（针对屏幕阅读器）。

7.col与colgroup

这2个属性其实本来应该是经常写table的人的福音一样的标签的。它可以为表格中一个或多个列定义属性值。比如说你表格中所有列都是左对齐，其中一列右对齐，不使用这个标签的话，那你就需要所有的td加上一个css的类来达到这个效果。但是用这个标签，只要一句<col align=”center”>就可以解决了。既然这么好，那为啥还说，本来应该是福音呢？悲剧的地方在于，这2个w3c标准标签与属性却只有IE能完整支持，firefox等目前都做不到（可以通过一些繁琐的高级的css来hack实现）。如果你的项目不考虑浏览器兼容，那你可以爽爽的用，或者针对firefox之类的浏览器写一个js脚本判断col，根据col动态添加对应的类到td上。

http://www.w3school.com.cn/tiy/t.asp?f=html_col_test

http://www.w3school.com.cn/tiy/t.asp?f=html_colgroup_test

8.dd,dl,dt

定义列表的3个标签。这3个标签应该说不属于冷门标签的范畴，但是本来使用范围也不广的才对。不过据说百度搜索非常偏爱这个标签，所以国内很多做SEO都大量用这个标签来做，看看dedecms的主题，几乎完全用这3个标签写的html。被滥用了。

9.del与ins

这2个标记用来显示被删除的文本以及插入的文本，一般浏览器会显示成删除线与下划线。一些blogger在更新博文的时候会经常使用这2个标记，符合语义化与SEO。如果不用这2个标记，使用css的text-decoration也能达到同样的效果。

http://www.w3school.com.cn/tiy/t.asp?f=html_delins

10.input

input标签常见得不行，但是input的属性也非常多，有几个稍微特别的属性可以介绍下。

accept属性，类型为file的文件上传框，可以指定accept，然后通过Javascript之类的，在客户端做一下判断上传的类型是否符合格式。注意，就算你在input上面指定了accept，浏览器也不会去保证上传上去的格式是符合要求的，同样还需要在服务端做判断。

disabled跟readonly属性，2个使用上区别不大。disabled范围更广一些，它可以禁止下拉框。在一些需要禁用文本框的时候，看情况选择使用这2个属性，readonly不能修改值，但是可以选中复制，可能更加友好。

size属性，相信吃过这个苦头的人也有不少吧。相同的size，在IE下，text跟password类型的input显示的宽度是不一样的，而其他浏览器却会显示一样的宽度。所以还是用css来定义input的宽度吧。

maxlength属性，这个是很好用的属性。这个限制长度的属性是基于浏览器原生的实现，不需要再用Javascript去控制避免用户输入过长的数据,这可是标准属性。

http://www.w3school.com.cn/tags/tag_input.asp

11.link的media属性

这个就是很常见的引入css的标记（虽然它本意不仅仅是用来引入css的，但是目前浏览器只支持引入css）。这里要提的是media属性。media指定了当前的css针对的设备，如果识别到对应的设备来访问，就调用对应的css link。最常用的其实就2种，一种，就是不写，默认是screen，计算机屏幕。一种就是print，打印用。经常可以在网页上面看到一个打印的链接，可以直接把网页打印出来。最早时候我在新浪看到它的打印的实现，是专门设计一个页面，点击打印就进到一个打印专用的页面，然后用浏览器的打印。其实完全不需要，只要在所需要提供打印的页面，加入一个专门的media=“print”的css link，为打印的界面设计专门设计一套css，不需要再去打开新页面。

通常建议使用link而不是@import来引入css。根据yahoo提出的前端性能优化法则，css应该放在顶部，尽快被浏览器加载。但是因为IE6在处理采用@import的css的时候，会当成外部引用而放到最后去加载，对前端性能有所影响。

http://www.w3school.com.cn/tiy/t.asp?f=html_link

12.noframes与noscript

2个为了可用性实现的标记。在不支持框架与Javascript显示特别的文字。如果框架或者Javascript对于你的应用至关重要，那么你应该使用这样的标记来做一个警告提示，提示用户开启脚本。

http://www.w3school.com.cn/tiy/t.asp?f=html_noframes

http://www.w3school.com.cn/tiy/t.asp?f=html_noscript

13.object

object定义一个嵌入的对象，可以使用此元素向 XHTML 页面添加多媒体。关于object标签的具体使用我也没有具体了解过。常常只在一些提供给外部调用的时候用到，常见的地方在视频网站提供给你的插入页码的代码。IE6下是使用embed来实现插入多媒体的，但是embed是非标准属性。呃。。很早之前，为了能完美通过html validate，狠折腾了一番embed跟object共存的方法。

14.ol的type属性

通常页面上使用ul比ol要多，用过ol的大概印象就是知道列表不是小圆点，而会显示数字顺序。但是用type属性，可以指定ol数字顺序的形式，例如罗马数字I,II，或者是字母顺序A，B，C，或者是小写字母。不过type属性是非标准属性。

http://www.w3school.com.cn/tiy/t.asp?f=html_lists_ordered

15.optgroup

我觉得这个标签是挺好用的一个标记，但是注意到的不多。optgroup用于组合选项。使用一个长的选项列表时，对相关的选项进行组合。例如出现一个人员的下拉列表的时候，人员按部门用optgroup分组，看起来分割得很清楚。此外，还可以用Javascript来做增强显示。比如你用js写一个弹出层，点击的时候解析select标签，列出所有部门跟人员分组供选择。如果客户禁用js，那么可以平稳退化成一个分组下拉菜单。

http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup

16.script的defer属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。如果脚本不会改变文档的内容的话，设置这个属性可以加快文档处理速度。因为它会到文档完全显示完再解析Javascript。目前只有IE支持这个属性。不过，通常最慢的不就是IE吗。。

17.select的multiple与size

这2个属性其实是常用属性。只是顺便提一下。这2个属性结合使用可以控制下拉多选菜单。设置了multiple属性之后，可以用ctrl来复选多个选项。size用来控制同时显示的菜单项的个数。

18.sub与sup

这2个标签可以用来显示上下标，通常用在一些计算公式上面。不过还可以经常在页面上显示一些标注标记，比如说加一个[1]表示注解1这样的。此外，经常logo附近带有alpha,beta之类的版本号，可以用上标来实现，简单，粗暴。

http://www.w3school.com.cn/tiy/t.asp?f=html_sup

19.table的cellspacing属性

table标签上经常可以看到cellspacing属性与cellpadding属性，还有border。虽然这些是控制外观的属性，但是它们是名正言顺的标准属性，可以放心用。一般都建议采用css来控制表格样式。但是有个特殊的地方，cellspacing属性是无法通过css来控制的。所以cellspacing只能在table里直接指定。

http://www.w3school.com.cn/tiy/t.asp?f=html_table_cellspacing

20.tbody

熟悉html的都知道table里面可以指定thead，tfoot，tbody。这里注意的是，thead跟tfoot只能出现一次，但是tbody是可以多次出现的。也就是说你可以采用tbody来对表格的数据进行分组显示，不同的tbody分组，采用不同的css类，来显示不同的外观。

21.textarea的wrap属性

很奇怪的是，w3上面的属性列表里面没有提到这个wrap，但是却在注释里面详细的讲解了wrap属性。在有些我们需要控制输入的换行符号的场合，wrap就能帮上你的忙了，省去手动替换换行符号的痛苦。

wrap=”virtual” 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap=”physical” 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

http://www.w3school.com.cn/tags/tag_textarea_prop_wrap.asp

此文请同步参考w3school的手册：HTML 4.01 / XHTML 1.0 参考手册

后记：这里列举的很多东西，使用的不多，但是还是有不小的价值的，一直以来我自己也是一知半解。也希望借此机会好好研究一番。花了2天时间整理了这篇文章，自己也是受益良多，希望对各位也有帮助。转载请参看我博客的版权声明，谢谢。

兼容性处理要点

1、DOCTYPE 影响 CSS 处理

2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width

3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式

4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

浏览器差异

1、ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。

[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

2、CSS透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。

3、CSS圆角问题

IE：ie7以下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。

4、cursor:hand  VS  cursor:pointer

问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。

5、字体大小定义不同

对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。

解决方法：使用指定的字体大小如14px。

并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

6、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

浏览器bug

1、IE的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案：在这个div里面加上display:inline;

例如：

<#div id=”imfloat”>

相应的css为

以下为引用的内容：

#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}

关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具有规范性。

2、IE选择符空格BUG
转载自：http://www.lisijie.org/article/105/
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。

请看以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>

这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

由于发觉内容收集越来越多，决定将CSS跟JavaScript分开。

一、document.formName.item(“itemName”) 问题

问题说明：IE下，可以使用 document.formName.item(“itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解决方法：统一使用document.formName.elements["elementName"]。

二、集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。

四、eval(“idName”)问题

问题说明：IE下，可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用 document.getElementById(“idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

六、const问题

问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

七、input.type属性问题

问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}

九、event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。
解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题，就改用myEvent代替event即可。

十、event.srcElement问题

问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。

十一、window.location.href问题

问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

十二、模态和非模态窗口问题

问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用 var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

十三、frame和iframe问题

以下面的frame为例：

(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象；
Firefox：使用window.frameName来访问这个frame对象；
解决方法：统一使用 window.document.getElementById(“frameId”) 来访问这个frame对象；
(2)切换frame内容
在IE和Firefox中都可以使用 window.document.getElementById(“frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”来切换frame的内容；
如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题

问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

十五、事件委托方法

问题说明：IE下，使用 document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();
解决方法：统一使用 document.body.onload=new Function(‘inject()’); 或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别

十六、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。

十七、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
示例：

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = ";my text";
}

[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

十八、Table操作问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表
解决方法：

//向table追加一个空行：

var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);

[注] 建议使用JS框架集来操作table，如JQuery。

十九、对象宽高赋值问题

问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + ‘px’;

二十、setAttribute(‘style’,'color:red;’)
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute(‘style’,'color:red’)
而用object.style.cssText = ‘color:red;’(这写法也有例外)
最好的办法是上面种方法都用上，万无一失

二一、类名设置
setAttribute(‘class’,'styleClass’)
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法：
setAttribute(‘class’,'styleClass’)

setAttribute(‘className’,'styleClass’)

或者直接 object.className=’styleClass’;

IE和FF都支持object.className。

二二、用setAttribute设置事件
var obj = document.getElementById(‘objId’);
obj.setAttribute(‘onclick’,'funcitonname();’);
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById(‘objId’);
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

二三、建立单选钮
IE以外的浏览器
var rdo = document.createElement(‘input’);
rdo.setAttribute(‘type’,'radio’);
rdo.setAttribute(‘name’,'radiobtn’);
rdo.setAttribute(‘value’,'checked’);

IE:
var rdo =document.createElement(“<input name=”radiobtn” type=”radio” value=”checked” />”);
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。