有的時候編寫的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>實現效果如下圖所示，在商城商品圖片列表中經常會遇到這樣的問題，應特別注意。
