1

嗨，我已经尝试了 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;
    }
4

1 回答 1

5

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测试过

于 2012-07-05T17:34:22.590 回答