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 */

以下是我在不久前找到这个解决方案的文章：

Cross Browser Support for inline-block Styling

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

IE6内联块无法正常工作

1 个答案: