Question

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

菜单的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中发生，我强制使用ie边缘元标记进行标准模式。 jsfiddle可以正常工作，即不是实际的网页。

编辑：我刚刚将以下css放入其中并且现在神奇地工作

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

然而，我仍然有在野生动物园和歌剧中没有正确渲染字体的问题，我猜测它们的渲染机器有什么关系 - 字体看起来重量更重，有人曾经发生过这种情况吗？< / p>

Answer 1

嗯，小提琴正在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;
}

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

1 个答案: