大家看看span元素和转换的元素为什么有空隙，各种元素转换有没有兼容性问题，总结下

<!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=gb2312" />
<title></title>
<style type='text/css'>
body { margin:0px; padding:0px; }
div,p { margin:0px; padding:0px; }
</style>
</head><body>
<div style='display:inline; border:1px solid #000; width:100px; background-color:#f00'>div转inline</div>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p><div style='display:inline-block; border:1px solid #000; width:100px; background-color:#0f0'>div转inline-block</div>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p><a style='display:block; border:1px solid #000; width:100px; background-color:#0f0'>a转block</a>
<span style='border:1px solid #000;'>span</span>
<p style='height:110px;'></p><a style='display:inline-block; border:1px solid #000; width:100px; background-color:#00f'>a转inline-block</a>
<span style='border:1px solid #000;'>span</span>
</body>
</html>

解决方案 »

  1.   

    我感觉是本身的空白导致的。
    浏览器就这样没办法。<div style='display:inline; border:1px solid #000; width:100px; background-color:#f00'>div杞琲nline</div><span style='border:1px solid #000;'>span</span>
    <p style='height:110px;'></p>
      

  2.   

    跨浏览器的inline-block对于支持inline-block的浏览器来说，display: inline-block就可以了，对于不支持的浏览器(IE6和IE7)来说，实现方法是将元素设置成display: inline，同时触发它的hasLayout就可以了。       #item {
                   display: inline-block;
                 }
                 #item {
                   *display: inline;
                 }
               这个地方需要注意的是这两条一定要分开写，不能放在同一个选择器中，否则hasLayout就会被取消，那样的话就需要zoom:1，所以如果非要写在一起的话，代码如下：       #item {
                   display: inline-block;
                   *display: inline;
                   *zoom: 1;
                 }
               
      

  3.   

    display: inline-block
    当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的，但是非常与众不同： IE/Win: inline-block and hasLayout 。