li标签的display的inline-block在IE6中的显示问题

让一个元素即不换行又具有 block 的特性，我们一定会想到一个属性 display:inline-block; 但在ie6和7中会有一点小麻烦。可以发现在IE6和IE7中每个li元素仍然独占一行。这是因为IE6和IE7不完全支持 inline-block 这个属性。

这个问题涉及到了,IE6和IE7中的 has layout 属性。IE6、7中的 inline 元素有个特殊的情况，就是触发了IE的 has layout 属性以后就拥有了layout。此时inline元素的表现和标准浏览器中的inline-block元素基本相同。我们可以用ie的私有属性zoom来触发 has layout。

样式的写法:

display:inline-block; /*firfox等标准浏览器识别 */

*display:inline; /*只有IE6和IE7识别*/

zoom:1; /*触发IE6和IE7下的haslayout*/

什么是 has layout？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）。当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has
layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性 一旦被触发，就不可逆转。

zoom 总是可以触发haslayout,但是在IE5中不支持。

具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。