利用css转换和转换为wordpress构建多级菜单.问题:在IE中不起作用

Question

我正在开发一个三级菜单，它运行得很好！——不幸的是，IE不支持指针事件或css转换。

这是菜单代码——它被设置为看起来像wordpress菜单>>wp_nav_menu(数组('menu'=>'menu Name'))；

<nav class="main">
<ul>
<li class="current-menu-ancestor"><a href="#link">A</a>
<ul>
<li><a href="#link">A1</a>
<ul>
<li><a href="#link">A1-1</a></li>
<li><a href="#link">A1-2</a></li>
<li><a href="#link">A1-3</a></li>
<li><a href="#link">A1-4</a></li>
</ul>
</li>
<li><a href="#link">A2</a>
<ul>
<li><a href="#link">A2-1</a></li>
<li><a href="#link">A2-2</a></li>
<li><a href="#link">A2-3</a></li>
<li><a href="#link">A2-4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#link">B</a>
<ul>
<li><a href="#link">B1</a>
<ul>
<li><a href="#link">B1-1</a></li>
<li><a href="#link">B1-2</a></li>
<li><a href="#link">B1-3</a></li>
<li><a href="#link">B1-4</a></li>
<li><a href="#link">B1-5</a></li>
<li><a href="#link">B1-6</a></li>
<li><a href="#link">B1-7</a></li>
<li><a href="#link">B1-8</a></li>
</ul>
</li>
<li><a href="#link">B2</a>
<ul>
<li><a href="#link">B2-1</a></li>
<li><a href="#link">B2-2</a></li>
<li><a href="#link">B2-3</a></li>
<li><a href="#link">B2-4</a></li>
</ul>
</li>
<li><a href="#link">B3</a>
<ul>
<li><a href="#link">B3-1</a></li>
<li><a href="#link">B3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>

我加入了一些jquery来移动"当前菜单祖先"类。

$( document ).ready(function($) {
$('nav > ul > li > a').hover( function(){
$('nav > ul > li').removeClass('current-menu-ancestor');
$(this).parent().addClass('current-menu-ancestor');
});
});

当然，还有处理样式和行为的CSS：

body {
margin: 0 auto;
paddding: 0;
background: rgba(140,142,144,1);
font-family: sans-serif;
font-size: 20px;
}
/* ========== Overall Nav Styles ========== */
nav ul {display:none;z-index:999;}
nav a {
transition: all 0.5s ease;
display:block;
text-align:center;
}
/* ========== Frist Level ========== */
nav.main > ul {
position: relative;
display:block;
float:left;
padding: 0;
margin: 0;
list-style:none;
width: 100%;
height: 60px;
background: rgba(250,252,255,1);
font-size: 1rem;
height: 60px;
line-height: 60px;
}
nav.main > ul > li { float:left;border-right: 1px solid rgba(80,82,84,.1);}
nav.main > ul > li:last-child {border: none;}
nav.main > ul > li > a {
padding: 0 20px;
font-weight: bold;
text-transform: uppercase;
text-decoration:none;
color: rgba(80,82,84,1);
}

nav.main > ul > li > a:hover { color: rgba(0,142,184,1);}
nav.main > ul > li > a:hover { color: rgba(0,142,184,1);}

/* ========== Second Level ========== */
nav.main > ul > li > ul{
position: absolute;
top: 60px;
left: 0;
padding: 0;
margin: 0;
list-style:none;
width: 100%;
background: rgba(100,102,105,1);
font-size: .875rem;
height: 50px;
line-height: 50px;
transition: all 0.5s ease;
display:block;
background: rgba(100,102,105,1);
pointer-events:none;
opacity: 0;
-webkit-transform:perspective(500) rotateX(-90deg);
-webkit-transform-origin: top;
}
nav.main > ul > li.current-menu-ancestor > ul {
pointer-events:auto;
opacity: 1;
-webkit-transform:perspective(500) rotateX(0deg);
-webkit-transform-origin: top;
}
nav.main > ul > li > ul > li { float:left;border-right: 1px solid rgba(200,202,204,.1);}
nav.main > ul > li > ul > li:last-child {border: none;}
nav.main > ul > li > ul > li > a {
padding: 0 20px;
font-weight: bold;
text-transform: uppercase;
text-decoration:none;
color: rgba(200,202,204,1);
}
nav.main > ul > li > ul > li > a:hover { color: rgba(255,142,0,1); }

/* ========== Third Level ========== */
nav.main > ul > li > ul > li > ul {
display:block;
position: absolute;
top: 50px;
left: 0;
padding: 5px 0 55px 0;
margin: 0;
list-style:none;
width: 100%;
background: rgba(60,62,65,1);
font-size: .75rem;
pointer-events:none;
transition: all 0.5s ease;
opacity: 0;
-webkit-transform:perspective(500) rotateX(-90deg);
-webkit-transform-origin: top;
}
nav.main > ul > li > ul > li > ul > li { float:left; width: 25% }
nav.main > ul > li > ul > li > ul > li > a {
height: 120px;
line-height: 120px;
padding: 0 20px;
margin: 10px;
border-radius: 5px;
background: rgba(0,0,0,.1);
font-weight: bold;
text-transform: uppercase;
text-decoration:none;
color: rgba(250,252,254,1);
}
nav.main > ul > li.current-menu-ancestor > ul > li > ul > li > a:hover {
color: rgba(142,255,240,1);
background: rgba(0,0,0,.5);
}
/* ========== Drawer Animation ========== */
nav.main > ul > li > ul > li:hover > ul {
pointer-events:auto;
padding: 30px 0;
opacity: 1;
-webkit-transform:perspective(500) rotateX(0deg);
-webkit-transform-origin: top;
}

我搜索了几个类似的问题，其中大多数都是关于定位或损坏的css。

我确实在这里找到了部分解决方案：https://stackoverflow.com/questions/15590578/css-drop-down-menu-not-working-in-internet-explorer

他们使用了一个简单的"display:block/display:none"开关，而不是转换。这有助于防止一个人与不可见的菜单项交互，但会带走任何类型的动画。

正如我前面提到的，对转换和指针事件的支持是这个问题的核心。如果指针事件在IE中有效，我将能够使用2d转换或简单的不透明度更改。我也尝试过改变高度，但这些托盘需要有一个动态高度来包装菜单项。将高度设置为100%或自动不起作用。

这是一把小提琴：http://jsfiddle.net/juicedesigns/9ggrt/

最糟糕的情况是，我只需要为ie设置一个非动画的后备样式，但我想我会继续提出这个问题，以防有人找到解决方案。

Answer 1

我不得不采用独立的IE风格来提供这种跨浏览器支持。

从最初的帖子到我现在的帖子，情况发生了一些变化，但这里有一个大致的想法：

检测IE并调用特定的CSS文件：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/theme/css/ie.css" />
<![endif]-->

强迫一些东西！重要，并在ie.css:中设置一个简单的块/无显示开关

header nav ul ul ul {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
header nav ul > li > ul > li > ul {
display:none;
}
header nav ul > li > ul > li:hover > ul {
display:block;
}

它在IE上没有流畅的动画，但它可以回到版本9。由于11放弃了对条件语句的支持，它将无法看到这个css文件，幸运的是，它对我使用的新css功能有更好的支持。