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

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

这里是菜单代码——它被设置为看起来像wordpress菜单>>>wp_导航菜单（数组（'menu'=>'菜单名'）

当然，处理样式和行为的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的

我确实在这里找到了部分解决方案：

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

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

这是一把小提琴：

---

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

我不得不求助于ie的单独样式来提供这种跨浏览器支持

在最初的帖子和我现在的帖子之间，情况发生了一些变化，但总体思路如下：

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

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

它在IE上没有流体动画，但可以追溯到版本9。由于11放弃了对条件语句的支持，它将无法看到这个css文件，幸运的是它对我使用的新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;
}

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

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;
}