标签：
设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container )；通俗讲就是：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
支持的浏览器：目前有 safri 和 chorme 及 ie8+ 和 firefox3.6+；ie6和ie7不支持该属性；
解决办法：
IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效，对于块级元素(div,p,ul......)无效。
In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn‘t apply the value inline-block for the CSS display property on HTML elements that default to block level.
两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。
2、IE6/7不完全支持inline-block，只对内联元素有效。
ie6,7 块元素实现 display:inline-block效果：
div{ display: inline-block; width: 350px; min-height: 250px; background-color: silver; margin:0 5px; vertical-align:top; /*垂直方向 顶部对齐，base_line为基线对齐*/ *display: inline; /*只用于 ie6和ie7的hack*/ zoom: 1; /*激发 ie7的 hasLayout*/ _height:250px; /*通过min-height 和 _height(ie6hack) 来达到相同高度效果*/ }
块状元素怎么实现display:inline-block;效果：
方法有2个： 1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明 中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如 下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
触发haslayout有很多方法：
display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
附我的demo代码一个：
<!DOCTYPE html> <html> <head> <title>display:inline-block hack001.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> *{ margin: 0px; padding: 0px; } h3{ text-align:center; margin: 5px auto; } div{ display: inline-block; width: 350px; min-height: 250px; background-color: silver; margin:0 5px; vertical-align:top; /*垂直方向 顶部对齐，base_line为基线对齐*/ *display: inline; /*用于 ie6和ie7的hack*/ zoom: 1; /*激发 ie7的 hasLayout*/ _height:250px; /*通过min-height 和 _height(ie6hack) 来达到相同效果*/ } </style> </head> <body> <p>inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )</p> <h3>测试 demo</h3> <div>display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 </div> <div> 这段代码在ie8以上版本显示正常，已经其他的浏览器都是正常的，而唯独在ie6,7下无效,然后通过css hack进行处理后的css为: zoom:1;*display:inline; </div> <div> 在没有加 vertical-align:top 之前；显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果：这 是因为每个div的基线是和其父基线对其的； 通俗的说 inline 和 inline-block 元素默认的值是 基线；也就是说元素基线要和其父元素基线对齐； 总之，修正方法是很简单的： vertical-align: top; 但是在IE 6 和 7 中，依然无效：IE 7 也不支持 inline-block，但是我们可以欺骗它以使 div 好像是 inline-block 的。 怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法， 但是可以用其他类似 zoom:1 的声明来激发它。(技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素); 当我们给 div 加上 zoom:1 和 *display:inline(用于 IE6 和 IE7 的星号 hack) 之后， 在 IE7 中它们就可以像 inline-block 一样显示了; 只剩 IE 6 了：IE6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。 把 _height(IE6 下划线 hack) 设为 250px 使所有的 div 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。 其他所有的浏览器会忽略 _height。 </div> <a href="###">这是基线</a> </body> </html>
参考链接：http://www.cnblogs.com/yupeng/archive/2011/04/13/2014147.html
http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html
等；另两个链接找不到了~~！
标签：
原文地址：http://www.cnblogs.com/happy-rabbit/p/5123904.html
