深入研究display:inline-block在浏览器中的应用

写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。

官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 

按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的） ，ie6，ie7 是不支持这个属性的。

ie6,7 如何支持这个属性呢？

对于块级元素，直接让块级元素成行内元素， 然后再触发layout。 {display：inline;zoom:1}，可能有的同学会说，怎么说ie6,7不支持这个元素呢？

我不是经常在ie6,7的a标签、span 下使用这个属性吗？也起到了作用，这里理解可能有一个误区，使用display：inline-block是触发了layout的原因。

另外一种方式就是先触发块级元素的layout 属性，然后再让他成内联元素来展现。比如p元素,可以这样写 p{display:inline-block}p{display:inline} 

display：inline-block可以用来做什么？

可以做的事情很多，可以写顶部的菜单，可以图文混排，可以内嵌block元素，也可以至如inline元素中，可以做信息卡片，如百度空间搭讪有缘人的卡片有缘人纪念日的固定宽度的书写，当然也可以做布局。 万变不离其宗，我觉得最本质的就是利用它的使元素为内联对象，但是内容做块状呈递。这点我们应该牢记。只要理解了它的本质东西，我们才可以以不变应万变，甚至可以创造自己的东西。

使用它要注意什么呢？

在使用了display：inline-block的元素之间有换行符，空格间隙问题。

1.块状元素被设置了display：inline-block后，ie6,7没有空格问题。其他浏览器都有。如下图所示：

在ie8，ie9，firefox可以通过使用font-size:0来解决，但是chrome很悲剧。还是有空白，我使用的是chrome10。不能清除。 可以通过添加letter-spacing属性

的值来解决，建议作者通过尝试来解决这个问题。我设置的值是-8px刚才好清除空白。我担心这会不会有相互覆盖问题。后来我将值调大到-28px，果然，在chrome中有覆盖，但是在其他的浏览器中没有。可见解决这个问题以chrome为主。

2.内联元素被设置了display：inline-block后，所有的浏览器都有换行，空白间隙问题。

如下图所示：

 所有浏览器，ie6,7,8,9 chrome，firefox都有空白，

怎么解决呢。直接在包含的元素上添加letter-spacing:-8px; 即可。

最后附上我研究的代码：

 

 1  <! DOCTYPE HTML >
 2  < html  >
 3  < head >
 4       < meta  http-equiv ="Content-Type"  content ="text/html;charset=gb2312"   />
 5       < style  type ="text/css" >
 6  *  {  margin : 0 ;  padding : 0  }
 7  #doc  {  width : 990px ;  margin : 0 auto ;  margin-top : 50px ; font : 12px/1.5 arial ;   }
 8  #doc h4  {  border-bottom : 1px solid #000 ;  margin : 10px 0px ;   }
 9  dib { display : inline-block }
10  div { display : inline-block ; }
11  div { display : inline ; }
12  ul { letter-spacing : -8px ; }
13  ul li { display : inline ; zoom : 1 ; }
14       </ style >
15       < title ></ title >
16  </ head >
17  < body >
18       < div  id ="doc" >
19       < h4 > display:inline-block的研究 </ h4 >
20       < div  class ="dib" > 测试这个属性的支持情况1 </ div >
21       < div  class ="dib" > 测试这个属性的支持情况2 </ div >
22       </ div >
23       < ul  >
24       < li >< img  src ="dj.jpg" /></ li >
25       < li >< img  src ="dj.jpg" /></ li >
26       </ ul >
27       < div  style ="letter-spacing:-8px;" >
28       < img  src ="dj.jpg" />
29       < img  src ="dj.jpg" />
30       < img  src ="dj.jpg" />
31       </ div >
32  </ body >
33  </ html >

 

 

 欢迎广大同学拍砖！！