说说display:inline-block

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok...

基本用法：

1. inline元素的inline-block：

   span{displsy:inline-blcok;}

2. block元素的inline-block：

   div{displsy:inline-blcok;#displsy:inline;#zoom:1;}

   #开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

1. 代码

   格式化对间距的影响：

   HTML：

   <ul>
       <li class="current">1</li>
       <li>2</li>
       <li>3</li>
   </ul>

   注意代码的缩进为4个空格

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   li{display:inline-block;#display:inline;#zoom:1;padding:1px 5px;border:1px #ccc solid;background-color:black;cursor:pointer;color:white;}
   li.current{background-color:#c31909;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   可见除IE6/7外的浏览器的li之间有4px的间隔。

   HTML将缩进去除则正常：

   <ul>
   <li class="current">1</li><li>2</li><li>3</li>
   </ul>

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   由此分析，这4px可理解为一个空格。

   当然，我们的HTML代码是给人看的，加上编辑器有格式化代码工具，缩进不能去除，而且在实际应用中li之间往往有一定的间距，所以我的做法是顺水推舟，仅对IE 6/7 hack：

   li{#margin-right:4px;}

2. overflow引起Firefox 3 bug：

   HTML：

   <a href="#">订阅</a>

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   a{display:inline-block;width:3.5em;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
   a:hover{color:black;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE6）：

   

   IE 7/8 的padding有点小问题，不过基本可以忽略。

   如果给a加上overflow:hidden（此处的overflow:hidden没有必要，仅为演示使用）

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   a{display:inline-block;width:3.5em;overflow:hidden;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
   a:hover{color:black;}

   Firefox 3显示效果：

   

   text-align:center失效！其余浏览器皆正常（这里有点小插曲，开始我误以为是td中的inline-block元素不能居中，后来发现是overflow:hidden的问题），经测试overflow:auto也会出现此问题，不过这个更少用到。

3. IE 6的line-height失效：

   HTML：

   <p>欢迎使用<span></span>飞信</p>

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   p{background-color:yellow;line-height:5;}
   span{display:inline-block;width:16px;height:16px;background-image:url('http://images.n20svrg.139.com/simple2008/coremail/images/simple_icons.png');background-repeat:no-repeat;background-position:-500px -50px;vertical-align:middle;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   未找到根治方法，可变通一下用padding解决：

   p{background-color:yellow;padding:2em 0;}

总结：

即便如此，我还是会继续使用下去-:P