一下总结是自己遇到以及自己在各大网站查阅整理，方便自己查看.
1.图片下间隙问题
现象：图片和父盒子有3px的间隙，并且间隙随着字体大小会发生变化，字体越大间隙越大
原因：图片具有文本属性，文本会以基线对齐属性，所以导致文字在下，图片在上，并且还有间隙
解决办法：
设置字体大小为0px
将图片转换为块元素（彻底取消基线对齐特征）
文本垂直方向对齐方式调整，vertical-align：top 顶线/中线 middle/基线baseline/底线bottom
2.行内元素并排中间间隙问题
解决办法：浮动实现并排
3.文本框与提交按钮对不齐现象
·不用按钮，用a标签模拟按钮，js提交
·按钮元素套div
<div>
<input type="buttom" value="登录" class="btn">
</div>
·内减input元素的padding和border
4.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题
解决方案：设置display：inline；
5.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度
6.cursor：hand显示手型在safari上不支持
解决方案：统一使用cursor：pointer
7.两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position：relative
8.const问题
说明：Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。
9.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
10.css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
11. FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border1px;}
ie理解为box.width =100
ff理解为box.width =100 + 1*2 = 102 //加上边框2px
解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
12.ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
13.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
14.链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。
15.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
16.FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。
17.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
18.event.srcElement问题
问题说明：IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj =event.srcElement ?event.srcElement : event.target;
