说说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;}  
  1. 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;<strong>overflow:hidden;</strong>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