我将在这里贴出一些介绍firefox和IE下的差别的的文字。
大部分是从网上搜索到的。
CSS问题

1、单位问题
问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外）
解决：写全单位如padding:0px;
2、水平居中
问题：div里的内容，ie默认为center，而ff默认left
解决：mairgin:0px auto;
3、高度问题
问题：如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的告诉，超过部分超出DIV底线以外，出现和下面的内容重叠的现象
解决：控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden;
4、clear:both;
问题：如果上面用float控制了n列DIV，下面ie会自动检测自动排列，ff则可能很不老实，到处乱动
解决：float结束后的下一个标签加clear:both;以结束float的控制
5、最大/小宽度问题
问题：min-width,max-width只是ff的命令，如何让ie实现同样的效果
解决：ie不认识min-和max-，实际ie认为min-width、max-width和width效果一样，可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
6、!important支持
问题：ff支持ie不支持
解决：无。ie会忽略。
7、游标状态
问题：cursor:hand;仅ie支持，显示手指状态
解决：使用cursor:pointer;ie和ff都支持
8、实际像素
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别

1、单位问题
和DTD有关，而不是和浏览器有关。如果DTD是XHTML那必须加单位
2、水平居中
没看明白。。不过mairgin:0px auto; 是让div本身居中
4、clear:both;
不老实的是IE，浮动是不会占空间的
5、最大/小宽度问题
可以用hack搞定，_height, _width
6、IE7也支持!important
8.是不是怪异和标准模式？

2：JS问题:

以下以 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中运行)：

…

新代码(可在IE和MF中运行)：

…

此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(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 中都有，具体意义有无差别尚未试验。

在ie 中getElementsByName(“test“)的时候返回的居然是id=test的object数组，而使用firefox则返回的是name＝ test的object的数组。按照w3c的规范应该是firefox的实现是正确的，只是不解ie为什么要实现成为id＝test的方式呢？“根据 NAME 标签属性的值获取对象的集合。”
firefox和ie中的getElementByID倒是相同：获取对 ID 标签属性为指定值的第一个对象的引用。
以上转载，但这个问题我也遇到了，我就在TR中同时加上id 和 name，这样都可以用了～

终于完成了偶的拖动窗口，花了近15个小时，庆祝一下(*^__^*)；以前写了IE下的功能，于是又写了firefox下的功能，在firefox上花了很多时间，发现了firefox中几处与IE中不同的地方：
1.firefox不能对innerText支持，也不知道为什么。firefox支持innerHTML但却不支持innerText，所以上网查了一下，原来它改支持textContent来实现innerText，不过实现得没有那么好，默认把多余的空格也保留了。如果不用 textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替
2.禁止选取网页内容：
在IE中一般用js：obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none
3.滤镜的支持(例：透明滤镜)：
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;
4.捕获事件：
IE：obj.setCapture() 、obj.releaseCapture()
Firefox： document.addEventListener("mousemove",mousemovefunction,true);
　　　　document.removeEventListener("mousemove",mousemovefunction,true);
5.获取鼠标位置：
IE:event.clientX、event.clientY
firefox：需要事件函数传递事件对象
　　　　obj.onmousemove=function(ev){
　　　　 X= ev.pageX;Y=ev.pageY;
　　　　}
6.DIV等元素的边界问题：
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；

所以在做这个兼容IE和firefox的拖动窗口时，在js和css的写法上要动点脑筋，给大家两个小技巧
一.判断浏览器类型：
var isIE=document.all? true:false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false
二.在不同浏览器下的CSS处理：
一般可以用!important来优先使用css语句（仅firefox支持）
比如：{border-width:0px!important;border-width:1px;}
在firefox下这个元素是没有边框的，在IE下边框宽度是1px
又发现几处XHTML与正常状态下的JS、CSS的区别
前阶段写了兼容IE/Firefox的拖动窗口发现了这两个浏览器的几处区别：发现几处IE与firefox的js和css几处不同点【原】
今天又写了兼容XHTML的版本，因为现在不是流行web标准嘛，偶不能落后啊！再说现在ASP.NET中的所有页面都是应用XHTML标准的，如果在布局页面中删了这句标准代码，里面的布局和控件visual studio就不显示了。
呵呵，在网页开头加了这个代码就是所谓的XHTML标准了
改了一下JS和CSS，调试了N次，发现了XHTML标准下的几个不同点：
1.document.documentElement 与 document.body
代码中设置页面的CSS时一定要用：document.documentElement
比如：document.documentElement.style.overflow=’hidden’;
overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；
2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement
即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement
但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替却会报错；
**********所以我总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement
3.呵呵，加了这个标准以后IE的边框问题也出现了变化，现在和firefox趋于一致了，是不是这个就是XHTML的优点——跨浏览器的标准
上篇文章提到：
设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
firefox（正常情况）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
加了XHTML标准后的（IE和firefox打和了，^_^）：
IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
firefox（XHTML）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；

1、IE与Firefox下对CSS解析的区别
这是我在使用中的一些经验，拿出来和大家分享，希望大家继续
对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！
img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用
结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用
其他的细节差别
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。
其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。
非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。
后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
From: http://www2.uuzone.com/blog/lilan/18832.htm 2005-5-25
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
转载：Allan.Blog()

 

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

 

 

在层的最下方产生一个高度为1的空格，可解除这个问题
3、CSS DIV 学习笔记
tag | 10 五月, 2005 23:16
一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class
二、每个稍大的区块div 后面都跟一个标记开始、结束
三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0
四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid
以上两种方法关键点在于选择其中一个为float=left
五、随机的切换图片：
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应
ulean | 09 三月, 2005 09:59
　　今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有float属性，于是我开始动手试验， float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。
xhtml:
==========================================================

test

test

test

• 预安装检查
• 阅读 PFC 授权协议
• 初始化数据库
• 完成安装

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}
FRom: http://ulean.zg163.net/
5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
译文：PorkFat
什么发生故障？
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin- left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！
情况应该如何？
下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。
这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。
重点
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。
最后，修复办法！
直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。
Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。
现在如何来做？
研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：
9.5.1 Positioning the float: the ‘float’ property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.
right
Same as ‘left’, but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。
下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

Firefox 下无法实现的问题:
复制地址到剪贴板
将文字横着显示

 

中的css在firefox下是不起作用的