Firefox在li元素上不一致

_______________________编辑_______________________

创建了一个JSIDLE：

_______________________编辑_______________________

你好,

我试图修复这个CSS错误，但我就是不明白为什么会发生这种情况！ Firefox无法正确显示，而其他浏览器则无法正确显示

当我查看div时，似乎Li高于其他浏览器

有什么想法吗

这是我的HTML和CSS代码

HTML

  <ul class="popnav" >
            <li><img src="@Url.Content("~/Content/Images/add.png")" width="32" height="32" />      
                <ul class="SideNav popnav"  >                        
                                <li> @Html.ActionImage("Create", "Event", new { Type = 1 }, "~/Content/Images/icon_event_smaller.png", "New", "Appointment")

                               </li>   

                                <li> @Html.ActionImage("Create", "Event", null, "~/Content/Images/task_smaller.png", "New", "Task")

                               </li>
                                <li> @Html.ActionImage("Create", "Document", null, "~/Content/Images/doc_smaller.png", "New", "Document")

                                </li>       
                                <li> @Html.ActionImage("Create", "Company", null, "~/Content/Images/comp_smaller.png", "New", "Company")</li>   
                                <li> @Html.ActionImage("Create", "Contact", null, "~/Content/Images/person_smaller.png", "New", "Contact")</li>                   

                </ul>
                <div class="clear"></div>
<li></li> 
....

---

只需尝试为

.popnav li

设置一个固定高度，这样您就可以快速解析。在其他情况下，您可能需要重置CSS

在HTML元素的可视化表示中，每个浏览器都有不同的默认设置。因此，实现CSS重置非常有用，该重置将删除并消除不一致的默认浏览器样式设置

---

是最受欢迎的解决方案之一，但您可以通过搜索引擎找到其他解决方案。

您是从“reset.css”开始的，它可以使浏览器之间的默认值正常化吗？如果删除清除div会发生什么情况？您可以链接到页面，还是制作一个测试用例？/你的div太多了。你的

*{}

也走错了方向，但这是另一个问题的主题。很高兴有小提琴，但因为它与屏幕截图不符，我再也不确定需要做什么了。他使用的通配符重置应该涵盖几乎所有其他重置所涉及的内容。浏览器的大多数元素通常具有相同的值。修复这个问题可能只是调整一个元素的问题？我使用了reset.css，但它没有改变任何事情。

     *
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 12px;
    font-family: Sans-serif;
    color: #404040;
}
  .clear
    {
        clear: both;
    }
    /* remove the list style */
    .popnav
    {
    }

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    .popnav li
    {
        float: left;
        display: block;
        position: relative;
        z-index: 500;
    }

    .popnav li ul li:hover
    {
        background-color: #45a6cf;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -webkit-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1);
    }
    .popnav li ul li:hover a
    {
        -webkit-transition: all 0.0s ease-out;
        -moz-transition: all 0.0s ease-out;
        -o-transition: all 0.0s ease-out;
        -ms-transition: all 0.0s ease-out;
        color: White;
    }

    .popnav li ul li:hover .SideSubNav a
    {
        color: #404040;
    }
    .popnav li ul li:hover .SideSubNav a:hover
    {
        color: White;
    }
    /* this is the parent menu */
    .popnav li a
    {
        display: block;
        height: 23px;
        text-decoration: none;
        text-align: left;
        margin-left: 8px;
        text-shadow: none;
        color: #404040;
    }

    #main #col1 ul li img
    {
        padding-right: 5px;
    }
    #bNav .popnav li img
    {
        padding-bottom: 10px;
    }