最近制作中有遇到過未知大小圖片未知容器里底部對齊的效果， 如下圖所示：

?

?

有用到display:inline-block做這個效果， 通過實踐會發(fā)現(xiàn)在FF下相鄰的inline及inline-block的元素而產(chǎn)生的莫名其妙的空白間距如下圖所示：

?

?

這是因為，html中存在空格或者換行，就會有一個間距，就像兩相鄰的兩個a，默認(rèn)情況下也會有間距，解決的辦法可以讓相鄰的inline及inline-block的元素沒有空格。顯然這樣不利用查看結(jié)構(gòu)。怎樣有效的去掉這空白間距呢，方法如下兩種。

?

方法一：利用letter-spacing屬性，給外層容器的定義letter-spacing=-9px其中-9px是容器字體大小的一半，再對內(nèi)部的inline-block的元素設(shè)置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鏈接時出現(xiàn)的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，對內(nèi)部的inline-block的元素設(shè)置font-size:12px，

?

該方法在chrome瀏覽器下還是會出現(xiàn)一點(diǎn)點(diǎn)空白

    *{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鏈接時出現(xiàn)的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

?

如果有時間讓我們來詳細(xì)了解一下display屬性inline-block值。其作用是“這個值導(dǎo)致一個元素產(chǎn)生一個塊狀盒模型（block box），而本身作為單一的內(nèi)聯(lián)盒模型（inline box）流動排列（flow），類似一個被替代的元素。Display值為inline-block的元素內(nèi)部形成一個塊狀盒模型，而本身形成類似一個內(nèi)聯(lián)的被替代元素”。即display為inline-block的元素既可以像塊狀元素一樣定義高度寬度，又可以和內(nèi)聯(lián)元素（比如文字）排列在一行。

?

Firefox3 beta、IE8 beta、Opera、Safari 支持 inline-block 屬性，但 IE6、IE7要實現(xiàn)類似inline-block的效果，可以先觸發(fā)layout，再設(shè)置為inline，需要注意的是這兩個display必須在兩個CSS聲明中才有效

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

  

?

或者直接設(shè)置為inline，再利用zoom來觸發(fā)layout來實現(xiàn)類似效果：

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

?

Firefox2 有-moz-inline-box 和 -moz-inline-stack 私有屬性。 在實際應(yīng)用中 -moz-inline-box 會存在元素間的對齊等問題，雖然 Firefox 還有一個私有屬性 -moz-box-align 來幫助解決對齊問題，但依舊難以預(yù)料問題多多，而相對來說 -moz-inline-stack 的表現(xiàn)更像 inline-block ，這點(diǎn)可以在 Firefox3 中測試出來。但 -moz-inline-stack 使用時也會有一個 bug ，如果一個 display:-moz-inline-stack; 的元素外層元素是 display:inline; 即會使 Firefox 中其包含的鏈接不可點(diǎn)，這個需要用 position:relative; 來解決。

?

懌飛博客總結(jié)如下代碼：

    display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持，IE 下觸發(fā) inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有屬性，也可以用 -moz-inline-box */
zoom:1; /*IE 下觸發(fā) hasLayout*/
*display:inline; /*一旦IE 下觸發(fā)了 hasLayout，設(shè)置 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; /* 隱藏溢出的內(nèi)容 */
vertical-align:middle; /* 行內(nèi)垂直居中，針對 Opera 比較大的偏離 */
width:？px; /*？為任意非auto值*/
height:？px; /*？為任意非auto值*/
  

?

?

由display:inline-block擴(kuò)展，現(xiàn)來了解塊級元素及行內(nèi)元素。

?

display:block就是將元素顯示為塊級元素，

特點(diǎn)是總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個寬度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。

?

display:inline就是將元素顯示為行內(nèi)元素.

特點(diǎn)是： 和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

?

?

行內(nèi)元素（inline elements，比如span,a,b等。）和塊元素(block elements，比如div,h1,p等)它們的區(qū)別可以分為下幾點(diǎn)：
塊元素會自動在末尾加一個換行，而行內(nèi)元素不會。
塊元素可以定義自身的高度（width）和寬度(height),而行內(nèi)元素不可以。
塊對象定義的自身垂直邊距可以改變行高，而行內(nèi)元素雖然可以定義但改變不了行高。 ??

有關(guān)display:inline-block在FF出現(xiàn)空白的解決方案