目前主流浏覽器的兼容性做的都比較好了，本文主要針對IE6，7的不兼容問題進行解決。
1.有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。
解決方法：給對應的父級加overflow:hidden;但是會有部分被隱藏掉，最好是精確計算寬高再設定
eg：（ie會撐開）
<style>
.box{ width:400px;}
.left{ width:200px;height:300px;background:red;float:left;}
.right{ width:200px;float:right;}
.div{width:180px;height:180px;background:blue;padding:15px;}
/*
計算一定要精確 不要讓內容的寬高超出我們設置的寬高
在IE6下，內容會撐開設置好的寬高
*/
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="div"></div>
</div>
</div>
</body>
2. 在IE6下有元素浮動時，如果寬度需要由內容撐開，就給裡邊的塊元素都加浮動，正常浏覽器不用加浮動。
eg：
<style>
.box{ width:400px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}
h3{margin:0;height:30px; float:left;}
/*
在IE6元素浮動，如果寬度需要內容撐開，就給裡邊的塊元素都加浮動
*/
</style>
</head>
<body>
<div class="box">
<div class="left">
<h3>左側</h3>
</div>
<div class="right">
<h3>右側</h3>
</div>
</div>
</body>
3. 在IE6下元素的高度的小於19px的時候，會被當做19px來處理
解決辦法：添加overflow:hidden;
4. 在IE6下border:1px dotted #000;中，dotted不支持，會以虛線的方式的出現。
解決方法：切背景平鋪
5. 在所有浏覽器中子元素的margin-top，margin-bottom值會傳遞給父級；
解決辦法：
a：給父級都添加浮動（或者給子級添加浮動也能解決margin-top問題，但是margin左右值會出現雙倍的值，也就是雙邊據bug問題，下面會講）；
b：給父級添加position:relative;(或position:absolute;但是會脫離文檔流)
c：添加display:inline-block; 正常浏覽器，可行，但是IE,7下，塊元素不支持display:inline-block;
d: 給附件添加border屬性，例如border:1px solid red; 正常浏覽器可行，在IE6下必須再給父級添加zoom:1;
eg:
<style>
body{margin:0;}
.box{background:blue;border:1px solid #000; zoom:1;}
.div{width:200px;height:200px;background:red;margin:100px;}
/*
在IE6下解決margin傳遞要觸發haslayout
在IE6下父級有邊框的時候，子元素的margin值消失
解決辦法:觸發父級的haslayout
*/
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
6. 在IE6下，塊元素有浮動和和橫向的margin值 ，橫向的margin值會被放大成兩倍。
解決辦法：添加display:inline;
<style>
.box{ float:left;border:10px solid #000;}
.box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}
/*
margin-right 一行右側第一個元素有雙邊距
margin-left 一行左側第一個元素有雙邊距
*/
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
7. 在IE6，7下，li自身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙
解決辦法：1.給li加浮動
2.給li加vertical-align;
注意：當IE6下最小高度問題，和 li的間隙問題共存的時候， 給li加浮動才能解決。
eg:
<style>
ul{margin:0;padding:0;width:302px;}
li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}
a{width:100px;float:left;height:30px;background:Red;}
span{width:100px;float:right;height:30px;background:blue;}
/*
在IE6，7下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙
解決辦法:
1.給li加浮動
2.給li加vertical-align
*/
</style>
</head>
<body>
<ul>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
</ul>
</body>
8.當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效
解決方法：額，還沒發現
eg：
<style>
.box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}
.box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}
/*
當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效
*/
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<!-- <div>4</div> -->
</div>
9. 在IE6下的文字溢出BUG。即：子元素的寬度和父級的寬度相差小於3px的時候,或者兩個浮動元素中間有注釋或者內嵌元素的時候，IE6下文字溢出
解決辦法:用div把注釋或者內嵌元素用div包起來。
eg：
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<!-- IE6下的文字溢出BUG --><span></span>
<div class="right">↓哈哈哈哈哈哈哈哈哈哈</div>
</div>
<!--
在IE6下的文字溢出BUG
子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有注釋或者內嵌元素
解決辦法:用div把注釋或者內嵌元素用div包起來
-->
</body>
10. 當浮動元素和絕對定位元素是並列關系的時候，在IE6下絕對定位元素會消失。
解決辦法: 給定位元素外面包個div。
eg：
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
/*
當浮動元素和絕對定位元素是並列關系的時候，在IE6下絕對定位元素會消失
解決辦法:
給定位元素外面包個div
*/
</style>
</head>
<body>
<div class="box">
<ul></ul>
<span></span>
</div>
11. 在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素。
解決辦法: 給父級也加相對定位 position:relative;。
eg：
<style>
.box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /* position:relative; */ }
.div{ width:150px;height:300px;background:yellow; position:relative;}
/*
在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素
解決辦法: 給父級也加相對定位position:relative;
*/
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
12. 在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差.
解決辦法: 盡量用偶數，還沒發現別的方法。
13. 在IE6下，position：fixed; 是沒有效果的。
解決方法：用js來控制吧。。。
14. 在IE6，7下輸入類型的表單控件上下各有1px的間隙。
解決辦法：給input加浮動，或者是絕對定位。
15. 在IE6，7下輸入類型的表單控件加border:none;會發現border還在，
解決辦法: 重置input的背景，如input{background:#fff;}; 或者使用border:0;或border:0 none;
16. 在IE6，7下輸入類型的表單控件輸入文字的時候，其背景圖片會跟著一塊移動 。
解決辦法: 把背景加給父級。
目前知道的css兼容性問題只有這些，當然不包括css3，如有新發現或以上存在問題，請給予指點。