有的时候编写的CSS样式没有什么错误，但在浏览器中却会出现一些很奇怪的问题，明明没有间距的地方出现了间距，没有空隙的地方多了一条白线，或者IE、Firefox下显示的效果截然不同，这些都与使用CSS Hack的原因相同。下面列举几个在工作中经常会用到的样式属性所存在的问题及解决方案。
（1）inline-block的兼容与4px空隙问题
在实际工作中，我们经常会用到“inline-block”(内联块)这个属性来代替“float”来使内容横向排列，而不产生浮动。但在IE6、IE7下并不能很好地支持该属性，即使支持这个属性的Firefox中依旧会产生4px的空白间隙。例如，我们需要制作一组横向导航菜单，代码如下
使用“inline-block”属性制作的横向菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li{list-style-type: none;margin: 0;padding: 0;border: 0;}
li{background-color: #ccc;display: inline-block;width: 100px;height: 30px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>li标签使用了“inline-block”触发layout，形成行布局，但IE7下的显示依旧是纵向排列，Firefox下则出现了间距，即使li上并没有margin和border属性的设置，如下图所示。
Firefox浏览器下inline-block属性会产生间隔
想解决上面的问题，代码如下：
ul{font-size: 0;}
li{font-size: 12px;background-color: #ccc;vertical-align: top;display: inline-block;*display: inline/*IE7*/;width: 100px;height: 30px;*zoom: 1/*IE7*/;}Firefox浏览器兼容正常显示效果
（2）margin-top、margin-bottom的重叠
当相邻的两个盒模型具有margin-top和margin-bottom属性时，浏览器会取其中大的值作为间距，代码如下
相邻的布局块具有margin-top和margin-bottom属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: #ccc;width:100px;height: 30px;margin-bottom: 15px;">1</div>
<div style="background-color: #ccc;width:100px;height: 30px;margin-top: 20px;">2</div>
</body>
</html>（3）图片同比例缩放，DIV内水平垂直居中
如果块内只有单行的文字，那么实现水平和垂直方向上都居中很简单，代码如下
单纯文字内容在DIV中水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="line-height: 200px;background-color: #eee;text-align: center;width: 200px;height: 200px;margin-bottom: 15px;">文字居中</div>
</body>
</html>未知大小图片同比例缩放后水平和垂直方向上居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
html{min-height: 101%;}
body{font-family: verdana,arial,tahoma;font-size: 12px;color: #333;}
div{margin: 0 auto;}
ul,ol,li{list-style: none;}
a{text-decoration: none;word-wrap: break-word;}
a:hover{text-decoration: underline;}
img{border:0;}
p{line-height: 26px;}
/*容器*/
.middle{font-size: 0;width: 880px;height: 218px;margin: 10px auto;border: solid 4px #999;}
.middle li{font-size: 12px;height: 200px;background-color: #f5f5f5;display: inline-block;*display: inline/*IE7*/;margin: 1%;width: 23%;*zoom: 1/*IE7*/;}
/*未知大小的图片在已知容器中的垂直居中和水平居中*/
.middle li img{margin-top: expression(100-this.height/2);max-width: 200px;max-height: 200px;}
.middle li a{text-align: center;vertical-align: middle;display: table-cell;width: 200px;height: 200px;overflow: hidden;}
</style>
</head>
<body>
<ul class="middle in-box">
<li><a href="javascript:void(0)"><img src="img/cool.png"/></a></li>
<li><a href="javascript:void(0)"><img src="img/130-81.png"/></a></li>
<li><a href="javascript:void(0)"><img src="img/banner/j2.jpg"/></a></li>
<li><a href="javascript:void(0)"><img src="games/image/egg_1.png"/></a></li>
</ul>
</body>
</html>实现效果如下图所示，在商城商品图片列表中经常会遇到这样的问题，应特别注意。
