Firefox 在 li 元素上不一致

Question

__________________________ 编辑________________________

创建了一个 jsFiddle:Fiddle Link

__________________________ 编辑________________________

你好，

我正在尝试修复这个 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> 
....

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是最受欢迎的解决方案之一，但您始终可以通过搜索引擎找到其他解决方案。