常见的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: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的width: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;}
浏览器常见Bug及解决办法
发表于：2017-02-07
作者：amazingsong
来源：
- 周排行
- 月排行
