css中display:inline-block的兼容性问题
inline-block的兼容性问题
兼容性：
IE6、IE7不识别inline-block但可以触发块元素。
其它主流浏览器均支持inline-block。
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：
display:inline-block;
*display:inline;
*zoom:1;
官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
按照这个解释：支持的浏览器有（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; 即可。
最后附上我研究的代码：
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0 }
#doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial; }
#doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
dib{display:inline-block}
div{display:inline-block;}
div{display:inline;}
ul{letter-spacing:-8px;}
ul li{display:inline;zoom:1;}
</style>
<title></title>
</head>
<body>
<div id="doc">
<h4>display:inline-block的研究</h4>
<div class="dib">测试这个属性的支持情况1</div>
<div class="dib">测试这个属性的支持情况2</div>
</div>
<ul >
<li><img src="dj.jpg"/></li>
<li><img src="dj.jpg"/></li>
</ul>
<div style="letter-spacing:-8px;">
<img src="dj.jpg"/>
<img src="dj.jpg"/>
<img src="dj.jpg"/>
</div>
</body>
</html>
