li 的外观在 IE8 中失真，而在 Mozilla firefox 中是正确的

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

以下是各自的截图

Answer 1

在“li”中，我刚刚添加了float (*float:left;)，以便它在ie7 中正确显示。在“ul li a”下，您必须删除“position:absolute;”并且只需添加行高（line-height: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 url 也是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;
        }