常见的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{100%;}
<!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: 100%;} .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的100%让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;}