CSS 菜单无法在 IE 中正确呈现

Question

我构建的菜单在除 IE 之外的所有其他浏览器中都能正常工作 - 真是个惊喜。

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

我不确定 fiddle 是否有用，因为当在 ie 中查看时菜单在这里可以正常工作，所以我猜这与我的模板有关。我使用了 IE edge 代码，它使网站上的其他所有内容都正常工作，有人有任何想法吗？

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 中，我已经使用 ie edge 元标记强制标准模式。 jsfiddle 将在 ie 中正常工作，只是不是实际的网页。

编辑:我刚刚放入了以下 css，它现在神奇地工作了

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

但是，我仍然遇到字体无法在 safari 和 opera 中正确渲染的问题，我猜测与他们的渲染机器有关 - 字体看起来更重，以前有人遇到过这种情况吗？

Answer 1

嗯， fiddle 在 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;
}