在制作网页的工程中，最难的并不是各种各样的新技术，而是对浏览器的兼容性的处理。所谓CSS样式的兼容性，就是CSS样式在多种浏览器中的显示问题。国内的浏览器很多都是IE的内核，而谷歌的浏览器效果又跟火狐接近，IE8以及以上的版本已经对兼容性做了很大的修改，所以我就以IE6和火狐的区别来讲解
无序列表的兼容性
对于无序列表的特点就是每个列表前都是以黑色圆点作为标示，默认状态下，火狐显示的黑点会比IE6显示的大，解决方法就是：list-style-type:none;然后再设置list-style-image。
此外，当我们为列表项加上属性list-style-type:hiragana;火狐可以正确的识别并显示出日文编号，而IE6则完全忽略了这个样式，仍然显示的默认样式。
浮动在IE6下产生双倍距离
浮动这个属性在网页布局的时候经常使用，但显示效果在火狐和IE6下有些不同，如使用float：left；使盒子浮动在一行上并间距为50px，在浏览器中显示如下：
明显看出IE6最左端出现了双倍距离，解决方法就是：在浮动的<div>样式中加上display：inline；此样式的作用是使块元素显示为行内元素 ，这样兼容性的问题就解决了。
在IE6中图片下方有空隙产生
在日常的网页制作中，一般来说插入图片的高度会和盒子的高度相同，那样在网页中图片下方才没有空隙，然而在IE6中还是会出现空隙。
这样的结果是由于IE6对图片CSS样式的解释和其他版本的浏览器不同，解决方法只需为img标签设置一个样式即可：display:block;将图片元素显示为块元素。
3像素问题
在网页制作中，经常会遇到左边图片右边文字的布局，如果使用浮动布局的话，在IE6中图像所在的<div>与右边文字部分的<div>之间会产生3px的间隙，如图
这样很容易导致后面的元素错位，解决方法： 为两个<div>分别加上float:left;并取消右侧<div>的margin-left属性，这样后面的<div>也会跟着向左浮动，但这样还需要为后面的<div>添加clear:left;以清除其向左浮动属性。
margin值加倍问题
CSS样式中设置的margin值在IE6中显示时会加倍，很容易显示错位
例如我们建两个<div>盒子，都给margin：2px；让他们并排显示，显示如下
很明显在IE6中盒子之间会显示双倍margin值，右边的盒子就会被顶下来，解决方法：为第一个盒子添加display:inline;属性（行内显示）。
margin值传递
给子元素加的margin经常会传递给父级
<style>
body{margin:0;}
.box{ background:black;}
.div{ width:200px; height:200px; background:red;margin:100px;}
</style>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
解决方法：1、IE6下给父级边框，margin传递就会消失
2、触发父级的 haslayout
list间隙问题
在IE6、7下list本身没有浮动，但是内容浮动了list下就会出现几px的间隙，解决方法：
1.给li加浮动（比较麻烦）
2.给li加垂直对齐样式 vertical-align:top;
浏览器不能自适应高度
在CSS样式中，当将元素的height值设置成auto时，它会根据自身内容的高度而自动适应高度，很多时候却不起作用，这时候我们需要添加一个属性overflow:hidden;就解决了。
最小高度问题
在IE6下浏览器默认高度为19px,小于19px的都按照19px来处理。
解决方法：加 overflow:hidden；
解决浏览器兼容性问题的小技巧
1.默认情况下IE有margin-left值，约为40px；火狐默认有padding-left值，也约为40px。通常我们使用通用选择器 * 来将网页中所有的元素的外边界、边框和间隙重新定义为0。如下代码：
*{ margin:0;
padding:0;
border:0;
}
2.关于网页居中的问题，IE默认使用text-align属性，值为center;火狐默认使用margin属性，左右边界值为auto。
3.在定义列表项或行文本的高度时，尽量避免使用height,而是用line-height属性间接定义。
4.不出现显示错误的大前提是一定要注意标签正确且完整嵌套。
5.为每个标签完善属性。正是由于浏览器有默认值，为标签写属性的同时，相当于重新定义了默认值，所以可避免一些兼容性问题。
border问题
1px dotted在IE6下不支持
解决方法：切背景平铺。
