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

IEdisplay: 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 は 11 年前のものであり、もうサポートされるべきではないため、IE6 でこれをテストしたことはありません。しかし、それは一見の価値があります。この記事は '07 年に書かれたものなので、IE6 でテストした可能性があります。

于 2012-07-05T17:34:22.590 に答える