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

2

在“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;
    }
于 2013-06-04T06:05:27.240 回答
0

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

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

于 2013-06-04T05:03:36.317 回答
0

您的 css 文件中有一些错误已纠正。jsFiddle 网址也在这里。

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;
        }
于 2013-06-04T05:41:48.413 回答