css对浏览器的兼容性有时让人很头疼，或许当你了解了当中的技巧跟原理，你就会觉得不是什么难事，现在我自己把网上摘抄的css兼容性知识点略作总结，对于web2.0的过度，请尽量使用xhtml格式写代码，而且DOCTYPE影响css处理，作为w3c的标准，一定要加doctype声明
css技巧整理
1、div的垂直居中问题
vertical—align:middle;将行距增加到和整个div一样高line-height:200px;然后插入文字，就垂直居中了。缺点是控制内容不要换行
2 margin加倍的问题
设置为float的div在IE下设置的matgin会加倍。这是IE6都存在的bug。解决方案是在这个div里面加上display:inline;例如
<# div >
相应的css为
# imflat
{
float: left;
margin:5px; /*IE下理解为10px*/
display:inline; /*IE下再理解为5px*/
}
3、浮动IE产生的双倍距离
#box
{
float:left;
width:100px;
margin:0 0 0 100px;
//这种情况下IE会产生200px的距离
display:inline //使浮动忽略
}
这里细说一下block于inline两个元素，block元素的特点是，总是在新行上开始，高度、宽度、行高、边距都可以控制的（块元素）；inline元素的特点是和其他元素在勇一行上，不可以控制（内嵌元素）
#box
{
display:block; //可以为内嵌元素模拟为块元素，display :inline；//实现同一行排列的效果
display:table； //表格元素
}
4、IE于宽度和高度的问题
IE不认得min-这个定义，但实际上他把正常width和height当做有min的情况来使用。这样问题就大了，如果之用高度和宽度，正常的浏览器里这两个值就不会变，如果之用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如如果要设置背景图片，这个宽度是比较重要的，要解决这个问题就可以这样
#box
{
width:80px;
height:35px;
}
html
>
body
#box
{
width:auto;
height:auto;
min-width:80px;
min-height:35px;
}
5、页面的的最小宽度
min-width是个非常方便的css命令，他可以指定元素最小值也不能小于宽度，这样就保证排版一直正确，但是在IE中不识别，但他实际上把width当做最小宽度来使用，为了让这一个命令在IE上也能应用，可以把<div>放到＜ｂｏｄｙ＞ 标签下，然后为div确定一个类，然后css这样设计
#container
{
min-width:600px;
width:expression(document body clientWidth<600?“600px”,"auto");
}
第一个min-width是正常的，但第二行的width使用了JavaScript，这只有IE才能认得，这也会让你的HTML文档不太正规，它实际上通过JavaScript的判断来实现最小宽度。
6、div浮动IE产生3像素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本左边有3px的间距
#box
{
flaot:left;
width:800px;
}
#left
{
float:left;
width:50%;
}
# right
{
width 50%;
}
*html #left
{
marght-right:-3px;//这句是关键
}
<div >
<div ></div>
<div ></div>
</div>
7、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，div等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决方法，对#layout使用line-height属性或者给#layout使用固定高度和宽度，尽量使得页面百年的简单
8、float的div闭合，清楚浮动，自适应高度
（1）例如：<#div >这里的notfloatc并不希望继续平移，而是希望往下排布floatA、floatB属性已经设置为float:left;
这段代码在IE中毫无问题，问题出在FF。原因是Notfloatc并非float标签，必须将float标签闭合，在<#div class="floatB"><#div class="notfloat">之间加上<#div class="clerar">这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常，并且将clear这样样式定义为如下就可以
.clear
{
clear:both;
}
(2)作为外部的wrapper的div不要顶死高度，为了让高度能自动适应，要在warapper里面加上overflow：hidden；当包含float的box的时候，高度自适应在IE下无效，这样应该触发IE私有属性（万恶的IE）用zoom:1可以做到，这样可以达到兼容
例如某一个wapper如下定义：
.colwrapper
{
overflow:hidder;
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 center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决
＜div id=”page”>
＜div id=”bg” style=”float:left;width:100%”>
＜div id=”left”>＜/div>
＜div id=”center”>＜/div>
＜div id=”right”>＜/div>
＜/div>
＜/div>
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats 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; //将对象作为块元素级的表格显示}
９．高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
＜div >
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。