первый пост здесь, но я все больше расстраиваюсь из-за этого.
По сути, у меня есть меню гамбургеров, которое я добавил на сайт, над которым я работаю, и оно отлично работает в chrome и edge, но не в IE11. Я пытался, и он отлично отображается в IE10.
У нас есть большое количество людей, использующих IE11, к сожалению, поэтому я действительно хотел бы, чтобы это работало.
Я проверил css на сайте https://caniuse.com/ и не вижу ничего, что могло бы создать проблему ...
Любая помощь будет оценили!
Не помогает, что используемая нами 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 (выглядит немного странно, поскольку мне пришлось удалить изображения и ссылки et c)