3

以下はCSSの一部です

#innerHeaders 
{
    background-color: #026062;
    height: 33px;
    left: 269px;
    position: relative;
    top: 17px;
    width: 755px;
}

ul li
{
    display:inline-block;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle; 
}

ul li a
{
    text-decoration:none;
    color:#FFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    position:absolute;
    top: 7px;
    left:45.5px;
}

ul li a:hover
{
    text-decoration:underline;  
}

.topBtns
{
    background-image:url(../images/topBtnsBg.png);
    width:128px;
    height:33px;
}

以下はHTMLコードです

<div id="innerHeaders">
    <ul>
        <li id="homeBtn" class="topBtns"><a href="index.html">Home</a></li>
        <li id="aboutBtn" class="topBtns"><a href="#" onClick="aboutData();">About</a></li>
        <li id="feedBackBtn" class="topBtns"><a href="xyz@abc.com">Feedback</a></li>
    </ul>
</div>

上記のliは、FirefoxブラウザーではHome AboutとFeedbackボタンインラインとして表示されますが、IE8ではHome AboutとFeedbackが重なって表示されます。

以下はそれぞれのスクリーンショットです IE ファイアフォックス

4

3 に答える 3

0

あなたのCSSは正しくありません。多くの場合、IE の問題は、親要素にレイアウトがないことです。これは haslayout の問題として知られています。これについては、次の記事で詳しく読むことができます: http://reference.sitepoint.com/css/haslayout

すべての親要素の高さと幅を定義してみてください。また、絶対値が問題を引き起こしている可能性があります。達成しようとしていることについてもっと説明できるかもしれません。

于 2013-06-04T05:03:36.317 に答える