0

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

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

不确定小提琴是否会有所帮助，因为在 ie 中查看时菜单在这里可以正常工作，所以我猜这与我的模板有关。我使用了 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 可以在 ie 中正常工作，而不是实际的网页。

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

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

但是，我仍然有字体在 safari 和 opera 中无法正确渲染的问题，我猜想与他们的渲染机器有关 - 字体似乎更重，以前有没有人发生过这种情况？

4

1 回答 1

2

嗯，小提琴在 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-15T10:04:24.477 回答