2013-04-12 57 views
1

我想創建一個帶圓角的下拉菜單,並且幾乎到了那裏,但是在IE中出現了一個小問題。如果你在FF中查看這個鏈接(http://ids-ind.com/koris/dropdown.html),它看起來並且工作正常,但是在IE中,右手邊有一個平頂。CSS菜單 - IE顯示問題

請你能告訴我需要做什麼/改變它看起來像FF嗎?

下面是CSS我使用

a:link {text-decoration:none;} 

/* tabs 
*************************/ 

ul.tabs 
{ 
    display: table; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: relative; 
} 

ul.tabs li 
{ 
    margin: 0 0 0 1px; 
    padding: 0; 
    list-style: none; 
    display: table-cell; 
    float: left; 
    position: relative; 
    background:url('../images/menuleft_bg.png') left bottom no-repeat; 
    line-height:55px; 
    width:130px; 
} 

ul.tabs a 
{ 
    position: relative; 
    display: block; 
    background:url('../images/menuright_bg.jpg') right bottom no-repeat; 
} 

/* dropdowns 
*************************/ 

ul.dropdown 
{ 
    margin: 0; 
    padding: 0; 
    display: block; 
    position: absolute; 
    z-index: 999; 
    top: 100%; 
    width: 130px; 
    display: none; 
    left: 0; 
} 

ul.dropdown ul.dropdown 
{ 
    top: 0; 
    left: 100%; 
} 

ul.dropdown li 
{ 
    margin: 0; 
    padding: 0; 
    float: none; 
    position: relative; 
    list-style: none; 
    display: block; 
} 

ul.dropdown li a 
{ 
    display: block; 
} 


/* menu-specifc 
*************************/ 

#menu 
{ 
    position: fixed; 
    z-index: 5; 
    top: 0; 
    left: 0; 
    height: 40px; 
    line-height: 40px; 
    border-bottom: 0px solid #000; 
} 

#menu ul 
{ 
    margin: 0 auto; 
} 


#menu ul li h4 
{ 
    margin: 0; 
} 

#menu ul li h4 a 
{ 
    font-size: 14px; 
    color: #000; 
    font-weight: bold; 
    padding: 0 15px; 
} 

#menu ul li a 
{ 
    color: #fff; 
    padding-left: 4px; 
} 

#menu ul li a img 
{ 
    vertical-align: middle; 
} 

#menu ul li a span 
{ 
    display: block; 
    padding: 0 20px; 
    text-align:center; 
} 

#menu ul.dropdown 
{ 
    padding: 20px 0; 
    background-image: url('../images/dropdownbg.png'); 
    overflow:hidden; 
    border-bottom: 0px solid #dc902f; 
    width: 130px; 
    z-index:110; 
} 

#menu ul.dropdown li a 
{ 
    border-bottom: 0px solid #e5cd8e; 
    line-height: 30px; 
    overflow: hidden; 
    height: 30px; 
    background-image: url('../images/dropdownbg2.png'); 
} 

#menu ul.dropdown li.last a 
{ 
    border-bottom-width: 0; 
} 

#menu ul.dropdown li a:hover 
{ 
    color:#990000; 
} 

#menu ul li h4 a:hover 
{ 
    background-image: none; 
} 
+0

?你可以使用'border-radius' CSS屬性(舊IE不支持)。你是否期待那麼多的IE7/IE8用戶? – Powerslave

+0

我確實使用過,但客戶端有IE8(呻吟) – Kipcab

回答

4

你爲什麼要使用這種圖像刪除position:relative;下面

ul.tabs a{} 
+0

就這麼簡單,謝謝... – Kipcab