第一篇文章在这里,但是我对此越来越感到沮丧。
基本上,我有一个汉堡菜单,已添加到我正在工作的站点,它在chrome和edge上工作正常,但在IE11中却不能。我尝试过,它在IE10中显示正常。
不幸的是,我们有很多人在使用IE11,所以我真的很想这样做。
我已经检查了https://caniuse.com/网站上的css,但看不到任何应该引起问题的内容...
任何帮助将不胜感激!
当我们添加CMS时,并不会删除我们使用的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中代码的链接(看起来有点时髦,因为我必须删除图像和链接等)
答案 0 :(得分:0)
IE需要一些样式属性的前缀,因此,建议您检查此站点: https://autoprefixer.github.io/ 并尝试复制您的CSS代码,并将其替换为带有前缀的代码,它应该可以工作。
答案 1 :(得分:0)
现在完成。谢谢您的帮助。
原来我使用的图像覆盖了IE11中的太多按钮,这意味着图像周围的可单击表面太小。选择较小的图像并增加复选框的大小,现在它在chrome和ie11上都可以正常工作。