汉堡包下拉菜单未在 ie11 中显示

Question

first post here, but I'm getting increasingly frustrated with this.

Basically, I have a hamburger menu I have added to a site I'm working on and it works fine in chrome and edge, but not in IE11. I have tried and it displays fine in IE10.

We have a significant amount of people using IE11 unfortunately so I really would like this to work.

I have checked the css on the https://caniuse.com/ site and can't see anything that should be creating a problem...

Any helps would be appreciated!

Doesn't help that the CMS we use just removes the and links when I include them which is super helpful

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>

and 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>

on codepen: https://codepen.io/kateseabra/pen/OJyNaBN -this is the link to the code in codepen (looks a bit funky as I had to remove the images and links etc)

Answer 1

IE need some prefixing for some styling attributes, so I suggest you to check this site: https://autoprefixer.github.io/ And try to copy your css code and replace it with the prefixed one, it should work.

Answer 2

This is now done. Thanks for the help.

Turns out the image I was using was covering too much of the button in IE11 which meant the clickable surface around the image was too small. Chose a smaller image and increased the size of the checkbox and now it works well on both chrome and ie11.