有关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