后来想起来自己曾经整理过的这篇文章，想起来table的cellspacing属性无法通过css来控制，那也就是说原先网站采用的reset.css并不能保证各个样式都一样的。。偏偏IE跟FF这些浏览器默认的cellspacing的值不一样，导致表格在不设置cellspacing的时候样子总是不同。

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

所以，应用表格的时候，一定需要写上<table cellspacing=”0″>，至于其他reset的css，就会通用了。

第一张为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 下均不存在。

我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的文字，常常用来加一些提示语句，比如说点击查看详情之类的，代码形如：

<a href=”#” title=”点击查看详情”>链接xx</a>

。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话，怎么实现呢。第一反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的，找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了：

<a href='#' target="_blank" title="标题: 关于对我校2006年至2009年发展党员工作情况进...
 &#13;发布日期: 2010-5-31 16:05:08&#13;类别：院务通知&#13;点击: 139">
 [05-31]&nbsp;&nbsp;关于对我校2006年至2009年发展党员工作情况进...
 </a>

注意到了吗。。很简单，只要使用&#13;这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。

翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。虽然很多问题看起来是挺基础的，但是综合一下也算是个权威指南吧。可以作为指导性的材料

来自：腾讯ISD Webteam，Efficient, maintainable CSS

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天时间整理了这篇文章，自己也是受益良多，希望对各位也有帮助。转载请参看我博客的版权声明，谢谢。

我也是个追求技术的人，也经常陷入这种圈套，写html绝对要求XHTML 1.0 Strict。所有非标准属性，不用。想尽办法解决。例如链接的打开新窗口 target，_blank，新窗口中打开，很常用的属性。不过不好意思，非标准属性。之前为了这问题，就折腾了下rel+Javascript的方法解决了。

另外一个是html里面的&符号，在XHTML 中，这类符号要求使用实体引用。&要改成&amp;，相信这个&大家都知道，很常见，用来分割url上面的参数。之前为了不让我的html validate插件显示红叉，我写的每个html页面，上面的每一个&都会替换成&amp;。

现在经历过这么多项目了，回头想想，有时也会自己暗笑下，有时候这样的坚持是不是显得有点小孩子气呢？

其实我想，什么地方该用什么东西，什么东西最合适，就是好的。拘泥于标准，作茧自缚，这就不太好了。标准的主要意义并不在你坚持的这些小小细节上面。或许你现在因为标准不用的东西，哪天就成了标准。

我现在做一些网站项目，会直接使用marquee来显示滚动的文字，很多人就说啦，marquee是早期IE私有的方法！不标准！浏览器不兼容！

嗯，是这样没错，marquee在safari下面确实不行，但是现在marquee在IE跟firefox，opera，chrome下运行都很良好。选择找个代码改改，或者直接造个轮子？嗯，满意了，这是完全标准的实现。但是无论时间效率还是成本，都远没有直接使用marquee好。它是浏览器原生的实现，不需要你再引入什么框架或者代码，无论性能还是易用性或者是外观表现，都会比自己写一个好。不标准？呵呵。

有些地方我会选择用表格来做布局。

精通div+css的人，往往对于任何用表格来布局的东西嗤之以鼻，坚持只在显示表格型数据的时候才用table，仿佛用了table就会被人瞧不起，是对自己的侮辱。哦，你精通div+css，怎么用表格来做布局？

这个问题其实挺早之前在我也在一些论坛或者群上跟一些人讨论过，我觉得，布局时候div+css，table兼用才是个最好的方式。

历史原因，早期的网页都是用table来布局的，所以，所有的浏览器对table的兼容性都做得非常好，可以说table做出来的界面的多浏览器兼容性最好。完美的前端开发，往往为了兼容多个浏览器投入了大量的时间，IE678,ff23，opera910还有safari，现在还有chrome。很多小地方的布局，用div+css往往需要大量的float跟clean，以及更多的宽度高度对齐的细节要处理，而且越小的地方，往往越容易出一些兼容性的问题。仔细思考一下，这些地方，你的html跟css，真的有比table有更好的维护性吗？

总结一下，所谓的技术与标准，都是为现实需求服务的，只要能实现需求，综合考虑时间效率与成本,都是可以拿来用的。就像伟大的邓小平理论说的，一些可以为社会主义发展做贡献的，都可以搞。

兼容性处理要点

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属性，别的浏览器都不可以识别出这一属性。问题解决。

之前在Insen的博客上看到一篇文章：改变文字选中时的颜色和背景色，另外在怿飞的博客上就发觉它的博客文字选中后颜色跟普通选中的时候不太一样，不过没留意是怎么做出来的，这下让我又想玩一把了，就当做是另一个小彩蛋吧。

不过，这个东西就像IE的私有属性一样，是非标准的实现，就有点像firefox下面的圆角的css代码，这个改变选中文字的背景色只能在firefox 和 google chrome中使用。

要实现很简单，把以下的css定义加到你的css中即可。

selection{background-color:#63C;color:#FFF;}
a::selection{background-color:#0C0;color:#FFF;}
::-moz-selection{background:#63C;color:#FFF;}
a::-moz-selection{background-color:#0C0;color:#FFF;}