在IE中無法正確呈現CSS菜單

我構建的菜單在所有其他瀏覽器（IE除外）中都能正常工作 - 這真是一個驚喜。在IE中無法正確呈現CSS菜單

的jsfiddle菜單：http://jsfiddle.net/JazParkyn/6jshy/19/

不知道，小提琴將有助於雖然作爲即看菜單正常工作就在這裏，所以我猜它的東西與我的模板。我已經使用IE邊緣代碼，並使網站上的所有其他工作都能正常工作，是否有人有任何想法？

CSS：

nav ul ul { 
z-index:100; 
opacity: 0; 
visibility: hidden; 
transition: all .5s ease-in; 
-o-transition: all .5s ease-in; 
-ms-transition: all .5s ease-in; 
-moz-transition: all .5s ease-in; 
-webkit-transition: all .5s ease-in; 
} 
nav ul li:hover > ul { 
z-index:100; 
visibility: visible; 
opacity: 1; 
} 
nav ul { 
background: #355E95; 
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
padding: 0 20px; 
border-radius: 10px; 
list-style: none; 
position: relative; 
display: inline-table; 
} 
nav ul:after { 
content:""; 
clear: both; 
display: block; 
} 
nav ul li { 
float: left; 
} 
nav ul li:hover { 
background: #1881B4; 
} 
nav ul li:hover a { 
color: #fff; 
} 
nav ul li a { 
display: block; 
padding: 20px; 
color: #ffffff; 
text-decoration: none; 
} 
nav ul ul { 
background: #355E95; 
border-radius: 0px; 
padding: 0; 
position: absolute; 
top: 100%; 
} 
nav ul ul li { 
float: none; 
border-top: 1px solid #D5EEFF; 
border-bottom: 1px solid #D5EEFF; 
position: relative; 
} 
nav ul ul li a { 
padding: 15px 40px; 
color: #fff; 
} 
nav ul ul li a:hover { 
background: #1881B4; 
} 
nav ul ul ul { 
position: absolute; 
left: 100%; 
top:0; 
}

任何建議，將不勝感激

這在IE10發生的事情，我已經被迫與即邊緣meta標籤的標準模式。 jsfiddle將在ie中正常工作，而不是實際的網頁。

編輯：我只是把下面的CSS中，現在可以神奇地運行

html { 
    -webkit-font-smoothing: antialiased; 
}

不過，我還有的字體不是在Safari和Opera正確呈現的問題，我猜的東西與他們的渲染機器相關 - 字體看起來重量較重，有沒有人有過這種情況發生過？

來源

2013-05-15 Jaz Parkyn

請指定您正在測試的IE版本。在IE9中，jsfiddle對我來說看起來很好，但如果你使用的是IE8或更早的版本，我應該告訴你，你正在使用幾個CSS功能，這些功能絕對不適用於較舊的IE版本。此外，請更詳細地說明它究竟是什麼不起作用。 – Spudley

哪些CSS功能不像我的代碼中的IE？我現在通過在上面的代碼中添加了標準模式，沒有改變我的菜單CSS。 –

重新編輯 - 現在可能會奇蹟般地工作，但我可以向你保證，'-webkit'風格在IE中絕對不會有影響，所以它不會被修復。 – Spudley

嗯，小提琴在IE中工作。您的網頁上我想補充的

menu.css（51行）

#nav ul li { 
    /* leave the other properties here */ 
    position:relative; 
}

和子菜單（56行）

#nav ul ul { 
    /* leave the other properties here */ 
    left:0; 
}

也許你可以將屬性添加到分離器類（僅用於視覺反饋）：

.separator { 
    cursor: pointer; 
}

來源

2013-05-15 10:04:24 Seer

+1這也不是在Chrome 26中工作，但它與@ Seer的修復。 –

感謝這個修復它的效果很好，關於爲什麼字體在safari和chrome渲染更重的任何想法？ –

在IE中無法正確呈現CSS菜單

回答

相關問題