Firefox是li元素上不一致

Question

_______________________EDIT_______________________

創建的jsfiddle：Fiddle Link

_______________________EDIT_______________________

你好，

我試圖固定T他的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是最流行的，但你總是可以通過在搜索引擎上查找其他解決方案。