IE6内联块无法正常工作

Question

嗨,我已经尝试了2个小时,我在网上找到的一切都无济于事.所以我最后的希望就在这里.您可以访问以下网站查看该网站:http: //webofdreams.ro/vworker/finemaid/finemaid.html# 导航是概述和服务.

HTML:

        <div class="contentNav clearfix">
        <ul class="clearfix">
            <li><a class="show1 navButton" class="left" id="activeLink">Overview</a></li>
            <li><a class="show2 navButton" class="right">Services</a></li>
        </ul>
        </div>

CSS:

.clearfix {clear: both;}
.contentNav {
    color: #ddd !important;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
    display: block;
    text-align: center;
    }
.contentNav a { 
    color: #fff !important;
    }
.navButton {
    font-size: 18px !important;;
    padding: 5px 15px;
    background: rgb(122,188,255); /* Old browsers */    
    }
.contentNav li {
    display: inline-block;
    }
/*IE specific css*/
.navButton {
    zoom: 1;
    *display: inline;
    }
.navButton a {
    zoom: 1;
    *display:inline;
    }
.height {
    height: 45px;
    clear: both;
    }

Answer 1

IE仅支持display: inline-block本机元素inline.<li>元素本身block,所以在IE中,你需要保持它display: inline,但触发hasLayout元素,如下所示:

display:-moz-inline-stack;  /* only for older mozilla browsers */
display:inline-block;
zoom:1;  /* triggers hasLayout */
*display:inline;  /* resets element to inline for IE */

这是我在一段时间前发现这个解决方案的文章:

跨浏览器支持内联块样式

也就是说,我从未在IE6中对此进行过测试,因为IE6已经使用了11年,不再受支持了.但它值得一试.这篇文章是在07年写的,所以他可能已经在IE6中进行了测试