Lee's Note

如果给li设置的display:"inline-block"，会引起元素之间产生空白。

具体空白宽度大概是ul(当前父类)的字体大小的1/3像素。

问题在FF、OP、CHM、SF、IE8中出现了，IE6-7则不会（好争气咯）。

解决方法：

1. 如果允许使用浮动的话，给li设置float可以解决
2. 采用负margin-left，个人不建议
3. 给ul设置字体大小为0，li再重置字体大小（Chrome无效）
   

   ul{ font-size:0}
   li{ font-size:size}
   

4. 使用负letter-spacing字间距解决（Oprea下仍无效）
   

   ul{ letter-spaceing:-4px} //这里的大小，大概是当前字体的1/3
   li{ letter-spaceing:0}
   

5.  完美解决，以上2+3方案
   

   ul{ letter-spaceing:-4px; font-size:0}
   li{ letter-spaceing:0; font-size:size}

看来inline-block这个值还是少用好，不然那会产生一大顿小问题，搞死人，就这样。

• 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

之所以这么多兼容问题，大多都是haslyout引起；

以上其中一个CSS属性，一触即发IE的haslyout。

网上抄下来的，写在这里，记录一下。

什么是 haslayout ？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元 素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）