问题一：不同浏览器的标签默认的外补丁和内补丁不同
症状：随便写几个标签，不加样式控制的情况下，各自的padding和margin差异比较大。
解决方案：css里 *{margin：0；padding：0;}
问题二：块属性标签float后，又有横行的margin情况下，在ie6显示的margin比设置的大。
症状：ie6中后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display：inline；将其转化为行内属性。
问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置的高度。
解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。
问题四：行内属性标签，设置display：block后采用float布局，又有横行的margin的情况，ie6间距bug。
解决方案：在display：block；后面加入display：inline；display：table；。
问题五：图片默认有间距。
问题症状：几个img标签放在一起时，有些浏览器会有默认的间距。
解决方案：使用float属性为img布局。
问题六：标签最低高度设置min-height不兼容。
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px;height:auto!important;height:200px;overflow:visible;}
问题七：表单元素行高不一致
解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）
问题八：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；
解决方案：给img添加border：0；或者是border：none；
问题九：按钮默认大小不一
解决方案：
1）用a标签来模拟按钮，添加样式；
2）如果按钮是一张背景图片，那么直接给按钮添加背景图；
问题十：百分比的bug
解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
解决方案：给右边浮动的子元素添加clear：right；
问题十一：透明度属性
解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1--100）
兼容其他浏览器：opacity：value；（取值范围0--1）
问题十二：上下margin的重叠问题
描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；
解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；
解决兼容性的技巧
技巧一：css hack
使用hacker，可以把浏览器分为：ie6、ie7和遨游、其他
ie6：_和*
ie7：*和*+
技巧二：float的div闭合；清除浮动；自适应高度
（1）例如：
＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">
这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜divclass="floatB">＜div class="NOTfloatC">之间加上＜div class="clear">这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}
（2）作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
（3）对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：
<div id=”page”>
<div id=”bg” style=”float:left;100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之。
（4）万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显示}
技巧三：div嵌套时 y轴上 padding和 marign的问题
（1）FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
（2）IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
（3）FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面