有關inline-block

1、display的三個經常使用值

     display:block;   將元素顯示爲塊級元素。其高度、行高以及頂和底邊距均可控制。寬度缺省是它的容器的100%，除非設定一個寬度。

     display:inline;   將元素顯示爲行內元素。和其餘元素都在一行上，高、行高以及頂和底邊距不可設置。寬度就是它的文字或圖片的寬度，不可改變。

     display:inline-block;    格式化爲行內元素的塊容器。將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。準確來講，應用此特性的元素呈現爲內聯對象，但能夠設置高度和寬度等塊級元素屬性。注意在設置margin:0 auto;時沒效果，由於它呈現的是內聯對象，佔據的不是一整行。

2、inline-block

     一、瀏覽器兼容問題：

         1）IE從5.5就開始支持display:inline-block;，只是支持的並非那麼的完善；

         2）IE6中inline元素只要觸發了haslayout其表現就相似於inline-block

         3）IE6中block元素即便觸發了haslayout也不能具備inline-block元素不換行的特性，必須先將其強制轉換爲inline元素，再觸發haslayout

         兼容各瀏覽器的寫法：

                                    display:inline-block;     //現代瀏覽器 和 IE六、7 的inline元素

                                    *display:inline;     //IE六、7 block元素

                                    *zoom:1;        //IE六、7 的inline元素觸發haslayout

         解決IE六、7 block元素表現爲inline-block還有一種方法：

                                     .content {

                                            display:inline-block;   //先觸發其haslayout

                                      }

                                      .content {

                                            *display:inline;     //再強制轉換成inline元素

                                      }

      二、間隙問題

           display設置爲inline和inline-block的元素先後會有間隙（不是固定大小的），但在IE六、7中block的元素設置inline-block後沒有間隙。

           產生間隙的根本緣由：HTML中的換行符、空格符、製表符等產生了空白符，而這些歸根結底都是字符，那麼它們的大小都是受font-size來控制的。

           解決間隙的方法：

                                   font-size:0;   //全部瀏覽器

                                   letter-spacing:-5px;     //safair等不支持字體爲0的瀏覽器

                                   *letter-spacing:normal;

                                   word-spacing:-1px;    //IE六、7