CSS教程：不被浏览器识别的display:inline-block属性怎么办

    可以看到在ie6，7中inline元素span已经表现得和一个display:inline-block元素一摸一样了，但是在标准浏览器中span仍然是行内元素（宽高以及上下margin都无效）；
    如果声明了不正确DTD，导致ie6在quirks 模式下解析，那么ie6会自动触发inline元素的haslayout，不过这里只讨论正常情况下的解析，所以加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout，之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性，设置为其他值会导致元素在ie下变形，设置为1既是保持原形不缩放；
    了解了上面的情况，我们就可以来解决之前那个问题了。可以改原先的css代码如下：

    让标准浏览器识别display:inline-block;让ie6，7识别display:inline;来覆盖上面的display:inline-block;（我为什么要说”覆盖”？）。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。

    可以看到，现在在各浏览器里面的显示已经一致了。li元素都显示在同一行；不过我上面问了：为什么要说覆盖？

假如我们把上面的css代码中的

    两句调换一下顺序会怎样？你会发现display:inline-block;覆盖了*display:inline;导致在ie6，7中原先的样式又失效了，这说明什么？说明ie6和ie7是认识display:inline-block的，所以我在前面说”不完全支持”而没有说”完全不支持”，嘿嘿，我可没有打自己嘴巴。之所以说”不完全支持”是因为还是有一点作用，虽然display:inline-block对ie6，7中的元素表现没有任何直接影响，但是它会触发inline元素的haslayout。只有这一个作用，让我们再回到前面的例子：

    可以看到，我们把zoom:1换成了display:inline-block以后，在ie6，7中span仍然和firefox等标准浏览器下一样，具有了设置的宽高和上下margin，上下padding。它表现得和display:inline-block同学一样好，不过这并不是因为display:inline-block这条声明直接生效了，而是因为display:inline-block触发了ie的haslayout属性，使得inline元素具有了inline-block的表现。