汉堡包下拉菜单未在 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:test@test.com?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/并尝试复制你的 ZC7A628CBA22E28EB17B5F5C6AE2A26

Answer 2

现在完成了。 谢谢您的帮助。

原来我使用的图像覆盖了 IE11 中的太多按钮，这意味着图像周围的可点击表面太小。 选择较小的图像并增加复选框的大小，现在它在 chrome 和 ie11 上都可以正常工作。