Question

以下是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 and Feedback按钮，但在IE8中，Home About和Feedback相互重叠。

以下是相应的屏幕截图 Firefox

Answer 1

在“li”中我刚刚添加了float（* float：left;），因此它在ie7中正确显示。在“ul li a”下你必须删除“position：absolute;”并添加行高（行高：34px;）。希望它能够在所有浏览器中正确显示。

ul li
   {
    display:inline-block;
    *float:left;
    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;
    line-height:34px;
    }

Answer 2

你的CSS不对。通常，IE的问题是你的父元素没有布局。这被称为haslayout问题。您可以在本文中详细了解这一点：http://reference.sitepoint.com/css/haslayout

尝试定义所有父元素的高度和宽度。绝对值也可能导致问题。也许你可以解释一下你想要完成的事情。

Answer 3

你的css文件中有一些错误，这些错误是正确的。 jsFiddle网址也here。

ul li
       {
        display:inline-block;
        *float:left;
        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;
        }

在IE8中，li的外观是扭曲的，而在mozilla firefox中则是正确的

3 个答案: