IE瀏覽器不能正確顯示下拉菜單

我有一個css菜單，它在IE 7> 10中運行良好，列表顯示不正確。聯繫人和歷史標題應在其他3個標題之下，出於某種原因，行爲和歷史標題在右側。我嘗試了各種組合的浮動和清除，但似乎沒有工作。如果我調整邊距值，它會在底部創建一個大的空白區域，這是不正確的。我包含了FF的屏幕截圖，這是正確的。如果有人能告訴我我的錯誤，我將不勝感激。感謝IE瀏覽器不能正確顯示下拉菜單

屏幕： IE_menu_incorrect FF_menu_correct

HTML代碼

<ul id="menu"><li> 

<div class="dropdown_3columns"> 
<div class="col_3"> 
    <h2> 
    Client Control Panel 
    </h2> 
</div> 
<div class="col_1"> 
    <h3> 
    Tickets 
    </h3> 
    <ul> 
    <li> 
    <a href="#">Inbox</a> 
    </li> 
    <li> 
    <a href="#">Sent Tickets</a> 
    </li> 
    <li> 
    <a href="#">Received Tickets</a> 
    </li> 
    <li> 
    <a href="#">Compose Ticket</a> 
    </li> 
    </ul> 
</div> 
<div class="col_1"> 
    <h3> 
    Messages 
    </h3> 
    <ul> 
    <li> 
    <a href="#">Broadcast Message</a> 
    </li> 
    <li> 
    <a href="#">Archived messages</a> 
    </li> 
    </ul> 
</div> 
<div class="col_1"> 
    <h3> 
    Actions 
    </h3> 
    <ul> 
    <li> 
    <a href="#">Actions</a> 
    </li> 
    <li> 
    <a href="#">View actions</a> 
    </li> 
    </ul> 
</div> 
<div class="listSpacer"> --> **this is the area** 
    <div class="col_1"> 
    <h3> 
    History 
    </h3> 
    <ul> 
    <li> 
    <a href="#">User Log</a> 
    </li> 
    <li> 
    <a href="#">Actions Log</a> 
    </li> 
    </ul> 
    </div> 
    <div class="col_1"> 
    <h3> 
    Contacts 
    </h3> 
    <ul> 
    <li> 
    <a href="#">View Contacts</a> 
    </li> 
    <li> 
    <a href="#">Edit Contacts</a> 
    </li> 
    </ul> 
    </div> 
</div> 
</div> 

</li></ul>

CSS代碼

#menu { 

position:relative; 
    list-style:none; 
    width:96.9%; 
    margin:20px auto 0px auto; 
    height:43px; 
    padding:0px 20px 0px 20px; 
color: black; 


    /* Background color and gradients */ 

    background: #e0e1e1; 
    background: -moz-linear-gradient(top, #d6d6d6, #aeaeae); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7d7d7), to(#013953)); 

    /* Borders */ 

    border: 1px solid #000000; 


} 

#menu li { 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 
    margin-top:7px; 
    border:none; 
z-index:5; 
} 

#menu li:hover { 
    border: 1px solid #777777; 
    padding: 4px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color: #000; 
    display:block; 
    outline:0; 
    text-decoration:none; 

    /* text-shadow: 1px 1px 1px #000; */ 
} 

#menu li:hover a { 
    color:#161616; 
    text-shadow: 1px 1px 1px #ffffff; 
} 
#menu li .drop { 
    padding-right:21px; 
    background:url("../img/drop.png") no-repeat right 8px; 
} 
#menu li:hover .drop { 
    background:url("../img/drop.png") no.-repeat right 7px; 
} 

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns { 
    margin:4px auto; 
    float:left; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    border-top:none; 

    /* Gradient background */ 
    background:#F4F4F4; 
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 

    /* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
    border-radius: 0px 5px 5px 5px; 
} 

.dropdown_1column {width: 140px;} 
.dropdown_2columns {width: 280px;} 
.dropdown_3columns {width: 420px;} 
.dropdown_4columns {width: 560px;} 
.dropdown_5columns {width: 700px;} 

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left:-1px; 
    top:auto; 
} 

.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
.col_1 {width:130px;} 
.col_2 {width:270px;} 
.col_3 {width:410px;} 
.col_4 {width:550px;} 
.col_5 {width:690px;} 

#menu .menu_right { 
    float:right; 
    margin-right:20px; 
} 

#menu li .align_right { 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px; 
} 

#menu li:hover .align_right { 
    left:auto; 
    right:-1px; 
    top:auto; 
} 

#menu p, #menu h2, #menu h3, #menu ul li { 
    font-family:Arial, Helvetica, sans-serif; 
    line-height:21px; 
    font-size:12px; 
    text-align:left; 
    text-shadow: 1px 1px 1px #FFFFFF; 
} 
#menu h2 { 
    font-size:17px; 
    font-weight:400; 
    letter-spacing:-1px; 
    margin:7px 0 14px 0; 
    padding-bottom:14px; 
    border-bottom:1px solid #666666; 
} 
#menu h3 { 
    font-size:12px; 
    margin:7px 0 14px 0; 
    padding-bottom:7px; 
    border-bottom:1px solid #888888; 
} 
#menu p { 
    line-height:18px; 
    margin:0 0 10px 0; 
} 

#menu li:hover div a { 
    font-size:12px; 
    color:#015b86; 
} 
#menu li:hover div a:hover { 
    color:#ff6600; 
} 


.strong { 
    font-weight:bold; 
} 
.italic { 
    font-style:italic; 
} 

.imgshadow { /* Better style on light background */ 
    background:#FFFFFF; 
    padding:4px; 
    border:1px solid #777777; 
    margin-top:5px; 
    -moz-box-shadow:0px 0px 5px #666666; 
    -webkit-box-shadow:0px 0px 5px #666666; 
    box-shadow:0px 0px 5px #666666; 
} 
.img_left { /* Image sticks to the left */ 
    width:auto; 
    float:left; 
    margin:5px 15px 5px 5px; 
} 

.imgnews_left { /* Image news sticks to the left */ 
    width:auto; 
    float:left; 
    margin:0px 15px 5px 5px; 
} 

#menu li .black_box { 
    background-color:#333333; 
    color: #eeeeee; 
    text-shadow: 1px 1px 1px #000; 
    padding:4px 6px 4px 6px; 

    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 

    /* Shadow */ 
    -webkit-box-shadow:inset 0 0 3px #000000; 
    -moz-box-shadow:inset 0 0 3px #000000; 
    box-shadow:inset 0 0 3px #000000; 
} 

#menu li ul { 
    list-style:none; 
    padding:0; 
    margin:0 0 12px 0; 
} 
#menu li ul li { 
    font-size:12px; 
    line-height:24px; 
    position:relative; 
    text-shadow: 1px 1px 1px #ffffff; 
    padding:0; 
    margin:0; 
    float:none; 
    text-align:left; 
    width:130px; 
} 
#menu li ul li:hover { 
    background:none; 
    border:none; 
    padding:0; 
    margin:0; 
} 

#menu li .greybox li { 
    background:#ffffff; 
    border:1px solid #bbbbbb; 
    margin:0px 0px 4px 0px; 
    padding:4px 6px 4px 6px; 
    width:116px; 

    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
} 
#menu li .greybox li:hover { 
    background:#F4F4F4; 
    border:1px solid #aaaaaa; 
    padding:4px 6px 4px 6px; 
    margin:0px 0px 4px 0px; 
} 

.date { 

font-size: 12px; 
color: grey; 

} 

#menu li:hover a[title] { 

margin-left: 40px; 
margin-top: 8px; 
font-size: 18px; 
font-family: Verdana, Geneva, sans-serif; 
/* border-bottom:1px solid #777777; */ 
} 

.newsSpace { 

margin-left: 45px; 
margin-right: 5px; 
margin-bottom: 10px; 
margin-top: 10px; 
font-size: 12px; 
font-family: Verdana, Geneva, sans-serif; 
/* border-bottom:1px solid #777777; */ 
} 

.newsPostedDate { 

float:right; 
margin-right: 10px; 
color: orange; 
font-size: 11px; 

} 

.welcomeName { 

font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: orange; 

} 

.listSpacer{ 

     margin-top:20px; 

}

來源

2013-06-21 user1532468

我換成你listSpacer分度以下，它工作得很好：

<br style="clear:both" />

這是對的jsfiddle：http://jsfiddle.net/r89wY/1/

需要注意的是，很難找到合適的位置徘徊。你是否刪除了根菜單文本？

來源

2013-06-21 16:44:31 LouD

非常感謝你您的幫助。 – user1532468

很高興我能幫到你。 – LouD

把一個div元素有明確的：既風格這兩個區域之間， <div class="listSpacer">

來源

2013-06-21 16:45:36 FabioG

經典clearfix問題

menu li { 
    overflow:hidden; /* add this */ 
}

前右，或嘗試過微清除修復：http://nicolasgallagher.com/micro-clearfix-hack/

來源

2013-06-21 16:46:49

傑森，依然如此。我剛剛在css中創建了你的代碼，如果我放在#menu裏，菜單根本不顯示。謝謝 – user1532468

對，對不起。我說得太快了。我認爲'li'包裝了第一行菜單。我的方法是用'listSpacer'封裝每一行，並使用明確的修復。 –

IE瀏覽器不能正確顯示下拉菜單

回答

相關問題