经常遇到此类问题，解决的办法从来都是网上找css解决方案，拷贝粘贴，能用就行，从未细想。
今天整理出来。
先看两段结构：
<!--内联元素 --> <div class="menu_1"> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> </div> <!--块元素--> <div class="menu_2"> <p>块元1素</p> <p>块元素100</p> <p>块元素</p> <p>块元素</p> <p>块元素1000</p> <p>块元素</p> <p>块元素</p> </div>
问题来了：要产生display：inline-block的 元素，可能是内联元素，也可能是块元素。
1，内联元素。应用样式：
.menu_1{ height:30px; background:#ffc; width:380px;} .menu_1 a{ background:#0CF; margin-left:10px; display:inline-block;}
IE6,7 都可以正常显示display：inline-block效果。
所以，如果是内联元素，解决方法：直接加 display:inline-block;
2，块元素。应用样式：
.menu_2{ width:430px; height:30px; background:#ccc;} .menu_2 p{ background:#f00; margin-left:5px; display:inline-block; _zoom:1;} .menu_2 p{*display:inline;}
IE6,7 都可以正常显示display：inline-block效果。
所以，如果是块元素，解决方法：
先给元素加 display:inline-block; _zoom:1;
再给元素加 *display:inline;
【注意：】要写两个display，且两个不能写在一个括号里，这是IE的一个bug.
附完整代码，供测试用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dispaly：inline-block</title> <style type="text/css"> .menu_1{ height:30px; background:#ffc; width:380px;} .menu_1 a{ background:#0CF; margin-left:10px;} .menu_2{ width:430px; height:30px; background:#ccc;} .menu_2 p{ background:#f00; margin-left:5px; display:inline-block; _zoom:1;} .menu_2 p{*display:inline;} </style> </head> <body> <!--内联元素 --> <div class="menu_1"> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> <a href="#">内联元素</a> </div> <!--块元素--> <div class="menu_2"> <p>块元1素</p> <p>块元素100</p> <p>块元素</p> <p>块元素</p> <p>块元素1000</p> <p>块元素</p> <p>块元素</p> </div> </body> </html>
IE6、7 不支持display:inline-block的问题,布布扣,bubuko.com
IE6、7 不支持display:inline-block的问题
原文：http://www.cnblogs.com/smjia/p/3610928.html