汉堡下拉列表未显示在ie11中

Question

这里的第一篇文章，但是我对此越来越感到沮丧。

[基本上，我有一个汉堡菜单，已添加到我正在工作的网站上，它在chrome和edge上工作正常，但在IE11中却不能。我尝试过，它在IE10中显示正常。

不幸的是，我们有很多人在使用IE11，所以我真的很想这样做。

我已经检查了https://caniuse.com/站点上的CSS，但看不到任何会引起问题的内容...

任何帮助将不胜感激！

[不帮助我们使用的CMS仅当删除了和链接时才删除它们，这非常有用

css：

.menu-item, .menu-open-button {
background : #177b57;
margin-bottom : 0;
border-radius : 100%;
width : 70px;
height : 70px;
position : fixed;
top : 180px;
right : 90px;
color : #FFFFFF;
text-align : center;
line-height : 70px;
transform : translate3d(0,0,0);
transition : transform 200ms ease-out;
}

#menu-open {
display : none;
margin-bottom : 0;
background : #4CAF50;
}

.faq-menu {
margin : auto;
top : 0;
position : fixed;
top : 180px;
right : 90px;
left : 0;
right : 0;
width : 70px;
height : 70px;
text-align : center;
box-sizing : border-box;
font-size : 26px;
font-family : "BCGHenSansLight", "Helvetica Neue", Verdana, Arial, sans-serif;
}

.menu-item:hover {
background : #4CAF50;
}

.menu-item:nth-child(6) {
transition-duration : 180ms;
}

.menu-item:nth-child(7) {
transition-duration : 180ms;
}

.menu-item:nth-child(8) {
transition-duration : 180ms;
}

.menu-item:nth-child(9) {
transition-duration : 180ms;
}

.menu-open-button {
z-index : 2;
transition-timing-function : cubic-bezier(0.175,0.885,0.32,1.275);
transition-duration : 400ms;
transform : scale(1.1,1.1) translate3d(0,0,0);
cursor : pointer;
box-shadow : 3px 3px 0 0 rgb(0, 0, 0, 0.14);
}

.menu-open-button:hover {
transform : scale(1.2,1.2) translate3d(0,0,0);
}

.menu-open:checked + .menu-open-button {
transition-timing-function : linear;
transition-duration : 200ms;
transform : scale(0.8,0.8) translate3d(0,0,0);
}

.menu-open:checked ~ .menu-item {
transition-timing-function : cubic-bezier(0.935,0,0.34,1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration : 180ms;
transform : translate3d(0.08361px,104.99997px,0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration : 280ms;
transform : translate3d(-90.86291px,52.62064px,0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration : 680ms;
transform : translate3d(-91.03006px,-52.33095px,0);
}

.faq-green {
background-color : #177b57;
box-shadow : 2px 2px 0 0 rgb(0, 0, 0, 0.14);
text-shadow : 1px 1px 0 rgb(0, 0, 0, 0.12);
}

.blue:hover {
color : #4CAF50;
text-shadow : none;
}

.email-green {
background-color : #177b57;
box-shadow : 2px 2px 0 0 rgb(0, 0, 0, 0.14);
text-shadow : 1px 1px 0 rgb(0, 0, 0, 0.12);
}

.green:hover {
color : #4CAF50;
text-shadow : none;
}

.email-purple {
background-color : #177b57;
box-shadow : 2px 2px 0 0 rgb(0, 0, 0, 0.14);
text-shadow : 1px 1px 0 rgb(0, 0, 0, 0.12);
}

.purple:hover {
color : #4CAF50;
text-shadow : none;

}

</style>

和html：

<title>Info menu</title>


<div>
   <input type="checkbox" class="menu-open" name="menu-open" id="menu-open">
   <label for="menu-open" class="menu-open-button">
    <img src="/data/00001225_question_mark.png" style="width:70px; height:70px; padding-bottom:5px; "> 
  </label>


  <a href="http://trackingkate.weebly.com" class="menu-item email-purple" title="Contact"> <img src="/img" style="width:40px; height:50px; padding-bottom:3px; "> </a>
   <a href="mailto:[email protected]?body=For any questions or issues please contact us." class="menu-item email-green" title="Email"><img src="/img" style="width:40px; height:40px;  "> </a>
 <a href="http://trackingkate.weebly.com" class="menu-item faq-green" title="FAQs"> <center> FAQs </center></a>
</div>



                        </div>

                    </div>

                </div>

关于codepen：https://codepen.io/kateseabra/pen/OJyNaBN-这是Codepen中代码的链接（看起来有点时髦，因为我必须删除图像和链接等）

Answer 1

IE需要为某些样式属性添加一些前缀，因此，建议您检查此站点：https://autoprefixer.github.io/并尝试复制您的CSS代码，并将其替换为带有前缀的代码，它应该可以正常工作。