有关display:inline-block在FF出现空白的解决方案

最近制作中有遇到过未知大小图片未知容器里底部对齐的效果，如下图所示：

 

 

有用到display:inline-block做这个效果，通过实践会发现在FF下相邻的inline及inline-block的元素而产生的莫名其妙的空白间距如下图所示：

 

 

这是因为，html中存在空格或者换行，就会有一个间距，就像两相邻的两个a，默认情况下也会有间距，解决的办法可以让相邻的inline及inline-block的元素没有空格。显然这样不利用查看结构。怎样有效的去掉这空白间距呢，方法如下两种。

 

方法一：利用letter-spacing属性，给外层容器的定义letter-spacing=-9px其中-9px是容器字体大小的一半，再对内部的inline-block的元素设置letter-spacing=0px。

 

可惜该方法对opera浏览器在无效

*{margin:0px;
  padding:0px;
  }
img{border:none;}
#wrap{   
font-size:18px;   
letter-spacing:-9px;/*字号的一半*/    
}    
#wrap li{
display:-moz-inline-stack; /*针对于ff2.0*/     
display:inline-block;   
*display:inline; /*针对IE*/     
zoom:1; /*针对IE*/  
letter-spacing:0;
   
}    
#wrap li img{
vertical-align:bottom; 
position:relative; /*针对于ff2.0链接时出现的BUG*/
} 

 

<ul id="wrap">    
<li><a href="#"><img src="images/1.jpg"></a></li>    
<li><a href="#"><img src="images/2.jpg"></a></li>    
<li><a href="#"><img src="images/3.jpg"></a></li>    
<li><a href="#"><img src="images/4.jpg"></a></li> 
<li><a href="#"><img src="images/5.jpg"></a></li>   
<li>更多图片</li>    
</ul>

 

 

 

见附件中dome1.html

 

方法二给外层容器的定义font-size:0，对内部的inline-block的元素设置font-size:12px，

 

该方法在chrome浏览器下还是会出现一点点空白

*{margin:0px;
  padding:0px;
  }
img{border:none;}
#wrap{   
font-size:0;
}    
#wrap li{
display:-moz-inline-stack; /*针对于ff2.0*/     
display:inline-block;   
*display:inline; /*针对IE*/     
zoom:1; /*针对IE*/  
letter-spacing:0;
font-size:12px;
}    
#wrap li img{
vertical-align:bottom; 
position:relative; /*针对于ff2.0链接时出现的BUG*/
}

 

<ul id="wrap">    
<li><a href="#"><img src="images/1.jpg"></a></li>    
<li><a href="#"><img src="images/2.jpg"></a></li>    
<li><a href="#"><img src="images/3.jpg"></a></li>    
<li><a href="#"><img src="images/4.jpg"></a></li> 
<li><a href="#"><img src="images/5.jpg"></a></li>   
<li>更多图片</li>    
</ul>

  

 

 

见附件中dome2.html

 

如果有时间让我们来详细了解一下display属性inline-block值。其作用是“这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。

 

Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 属性，但 IE6、IE7要实现类似inline-block的效果，可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明中才有效

#wrap li{
    display:inline-block;
}
#wrap li{
    display:inline;
}

 

或者直接设置为inline，再利用zoom来触发layout来实现类似效果：

#wrap li{
display:inline;
zoom:1;
}

 

Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有属性。在实际应用中 -moz-inline-box 会存在元素间的对齐等问题，虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说 -moz-inline-stack 的表现更像 inline-block ，这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ，如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点，这个需要用 position:relative; 来解决。

 

怿飞博客总结如下代码：

display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持，IE 下触发 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性，也可以用 -moz-inline-box */
zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字，可用这四个属性 */
/*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0; */
overflow:hidden; /* 隐藏溢出的内容 */
vertical-align:middle; /* 行内垂直居中，针对 Opera 比较大的偏离 */
width:？px; /*？为任意非auto值*/
height:？px; /*？为任意非auto值*/

 

 

由display:inline-block扩展，现来了解块级元素及行内元素。

 

display:block就是将元素显示为块级元素，

特点是总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

 

display:inline就是将元素显示为行内元素.

特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

 

 

行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)它们的区别可以分为下几点：
块元素会自动在末尾加一个换行，而行内元素不会。
块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。