常见的bug列表：
　　IE6下，当块级元素   margin与float同方向时，margin会加倍  例如 .box{float:left;margin-left:10px;}在IE6下表现的margin-left是20px，这时的解决办法设置display:inline;  要深入理解margin双边距bug产生的条件。
　　img在所有浏览器下边有空白 通用解决办法  img{vertical-align:top;}，当然也有其他解决办法 参照笔记  img标签下边空白解决方案
　　img元素在ie浏览器下有默认边框  通用解决办法 img{border:0 none;}   综合2，3解决这两个bug可以在公用样式中这样定义 img{bordr:0 none;vertical-align:top; }
　　多个行内元素都设置成display:inline-block;时元素之间有空格 解决办法设置父元素的font-size:0;再重新声明父元素的子元素的字体大小
　　块级元素设置display:inline-block;在IE6/7下不能正确显示   *display: inline;*zoom: 1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="../css/css.css"/>
<style type="text/css">
.span1，.span2，.div1，.div2{display: inline-block; width: 100px; height: 100px;}
.span1，.div2{ background: blue; }
.span2，.div1{background: red;}
.div1，.div2{*display: inline;*zoom: 1;}
/**display: inline;*zoom: 1;*/
</style>
</head>
<body>
<div class="box">
<span class="span1">span1</span>
<span class="span2">span2</span>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
<div>
　　块级元素的display:inline-block IE6/7 不支持，解决办法 *display:inline;*zoom:1;
　　</div>
　　</body>
　　</html>
　　IE6不识别min-height(max-height)属性，解决办法 .box{min-height:100px;_height:100px;}， 此时一定不能再设置overflow的值为hidden，否则模拟min-height效果将失效
　　IE6下，当浮动元素与非浮动元素相邻时，这个3像素的Bug会出现 我还没搞清楚==
　　ul li a 列表时，设置a的display:block让a充满li的区域增大点击区域 IE6下li之间会有间距，解决办法为a设置height或者设置zoom:1;触发IE下的hasLayout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
ul，ol{list-style: none;}
li a{background: blue; display: block;height: 30px; }
</style>
</head>
<ul>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
<li><a href="#">99</a></li>
</ul>
<body>
</body>
</html>
　　游标手指cursor  cursor: pointer 可以同时在 IE FF 中显示游标手指状，cursor:hand; 仅 IE中有效，所以用css设置鼠标手形时都统一用cursor:pointer;
　　在制作一个表格时一般将table放入一个div中，这时table宽度不能充满父div，这时要设置table{width:;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<link rel="stylesheet" type="text/css" href="../css/css.css"/>
<style type="text/css">
.tab_cont table{width: ;}
.tab_cont th，.tab_cont td{border: 1px solid #ccc;padding: 5px 0;}
.tab_cont tr{ text-align: center;}
h1，p{text-align: center; font-weight: bold;color: red;}
tr:hover{background: #666; color: #fff;}
.gray{background: #F8F8F8;}
thead tr{background: #999; color: #fff;}
</style>
</head>
<body>
<h1>表格的制作方法</h1>
<div class="layout tab_cont">
<table>
<thead>
<tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
</thead>
<tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr class="gray"><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>
<div>
<p>一定要设置table的width:让table充满父div，不设置不能充满</p>
<p>单元格只对padding有效，对margin无效</p>
</div>
</body>
</html>
　　的zoom:1;当在IE6下遇到奇葩的问题不能解决时，试试zoom:1 它可以触发ie6的hasLayout而不影响其他浏览器的正常表现
　　CSS属性Hack写法
　　1、IE6浏览器
　　.demo {_color: red;}
　　2、IE6-7浏览器识别
　　.demo {*color: red;}
　　3、所有浏览器除IE6浏览外
　　.demo {color/**/:red;}
　　4、IE6-9浏览器
　　.demo {color: red9;}
　　5、IE7-8浏览器
　　.demo {color/***/:red9;}