CSS中一些兼容性问题就是浏览器兼容，而这些浏览器兼容问题主要是Ie和FF之间的争斗。
CSS hack中的一些事：
我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack。
CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。
（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。
1 <!--[if IE 8]> 2 <p>Welcome to Internet Explorer 8.</p> 3 <![endif]-->
(2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "9"，IE6不能识别!important FireFox不能识别 * _ 9
.type{
color: #111; /* all */
color: #2229; /* IE */
*color: #333; /* IE6/IE7 */
_color: #444; /* IE6 */
}
（3）选择器前缀法，顾名思义，就是给选择器加上前缀。
IE6可识别 *div{color:red;}
IE7可识别 *+div{color:red;}
下面来说一下主要的兼容性问题：
（1）最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善，我们一般推荐淘宝的样式初始化。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
(2)IE6双边距bug: 块属性元素如果添加浮动之后，会产生双倍外边距bug。
解决方式：
给float元素添加display：inline-block 即可正常显示
(3)上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。
解决方式：
上下两个尽量不要同时使用margin—top和margin-bottom。
(4)超链接访问样式的问题，伪类要按照一定的顺序书写：
a:link{} a:visited{} a:hover{} a:active{}
(5)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：
-webkit-text-size-adjust: none;
(6)png24位的图片在IE6下面会出现北京，所以最好还是使用png8格式的。
(7)IE盒模型和W3C标准盒模型：
IE盒模型：margin+border+padding+content；
W3C盒模型：margin+border+padding+content；
从上面的表达式看不出来IE盒模型与W3C盒模型有什么不同，例如一个盒子模型如下：margin:20px,border:10px,padding:10px;200px;height:50px;
如果用w3c盒子模型解释，那么这个盒子模型占用的：
宽度为：20*2+10*2+10*2+200=280px;
高度：20*2+10*2+20*2+50=130px;
盒子的实际宽度大小为:10*2+10*2+200=240px;
实际高度：10*2+10*2+50=90px;
用ie的盒子模型解释 ：
盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;
盒子的实际大小为：宽度:200px, 高度:50px;
我们常常理解的盒子模型是w3c这样的盒子模型
(8)IE6div高度不能小于10px：
解决方式：
<div style="height:2px;overflow:hidden;background:#000000;778px;"></div> <div style="height:2px;font-size:2px;background:#000000;778px;">&nbps;</div>
希望大家能够理解，也希望自己能够加深一下记忆。