Firefox与li元素不一致

Question

_______________________ EDIT _______________________

创建了一个jsFiddle：Fiddle Link

_______________________ EDIT _______________________

您好，

我正在尝试解决这个CSS错误，但我不知道为什么会发生这种情况！ 当其他浏览器正确显示时，Firefox无法正确显示。

当我看到div时，看起来李高于其他浏览器。

有什么想法吗？

这是我的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> 
....

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;
    }

Answer 1

尝试为.popnav li设置固定高度，这样您就可以快速解决。在其他情况下，您可能希望重置您的CSS。

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

Eric Meyer's CSS reset是最受欢迎的广告之一，但您可以通过查看搜索引擎找到其他解决方案。