Question

导航栏css没有正确显示在Firefox中，但它可以用IE浏览器

css代码

#topnav ul
{
    display:table;
    list-style-type:none;
    margin:0;
    padding:0;

    overflow:hidden;
}

#topnav li
{   

    float:left;

}

#topvav a:link,
#topnav a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    font-family:calibri;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

#topnav a:hover,
#topnav a:active
{
    background-color:#7A991A;
}

html代码

<ul id="topnav">
    <li id="topnav"><a  href="#home">Home</a></li>
    <li id="topnav"><a  href="#news">OPD</a></li>
    <li id="topnav"><a  href="#news">IPD</a></li>
    <li id="topnav"><a  href="#news">Infrastucture</a></li>
    <li id="topnav"><a  href="#news">Gallery</a></li>
    <li id="topnav"><a  href="#news">Media</a></li>
    <li id="topnav"><a  href="#contact">Site Map</a></li>
    <li id="topnav"><a  href="#about">About</a></li>
</ul>


</tr>

Answer 1

您使用的id不正确。整个页面的 ID 必须唯一。此外，您不需要带有ID的li个元素。您可以通过CSS访问li元素。

#topnav li

然后，您的选择器#topnav ul无效。它应该是ul#topnav（就我从你发布的HTML中看到的那样）

Answer 2

将float: left; #topnav中的“li”更改为“display: inline;”。

导航栏CSS在Firefox中没有正确显示，但IE可以正常显示

2 个答案: