【发布时间】：2016-03-26 00:22:50
【问题描述】：
我有一个nav 元素，在鼠标悬停时会显示我的菜单，它在 Safari 和 Chrome 上运行良好，但在 Firefox 和 IE 中却不行：
/* start nav menu morph */
nav {
width: 23%;
background: #222222;
color: rgba(255, 255, 255, 0.87);
-webkit-clip-path: circle(16px at 30px 24px);
clip-path: circle(16px at 30px 24px);
-webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
}
nav:hover {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-duration: 0.75s;
transition-duration: 0.75s;
-webkit-clip-path: circle(500px at 225px 24px);
clip-path: circle(500px at 225px 24px);
}
nav a {
width: 100%;
display: block;
line-height: 50px;
padding: 0 20px;
color: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav a:hover {
background: #ffe082;
}
nav a:active {
background: #ffca28;
}
.nav-sim {
position: absolute;
right: 0;
top: -6px;
}
.navicon {
padding: 23px 20px;
cursor: pointer;
-webkit-transform-origin: 32px 24px;
-ms-transform-origin: 32px 24px;
transform-origin: 32px 24px;
}
.navicon div {
position: relative;
width: 20px;
height: 2px;
background: rgb(254, 70, 70);
}
.navicon div:before,
.navicon div:after {
display: block;
content: "";
width: 20px;
height: 2px;
background: rgb(254, 70, 70);
position: absolute;
}
.navicon div:before {
top: -7px;
}
.navicon div:after {
top: 7px;
}
.fa-sim {
font-size: large;
margin-left: 5px;
}
/* end nav menu morph */<noscript>
<style>
#navmenusim {
display: none;
}
</style>
</noscript>
<nav class="nav-sim" id="navmenusim">
<div class="navicon">
<div></div>
</div>
<a href="#" class="" rel="">Home<i class="fa fa-home icon i-sim fa-sim"></i></a>
<a href="#" class="" rel="">Blog<i class="fa fa-rss icon i-sim fa-sim"></i></a>
<a href="#" class="" rel="">Contact<i class="fa fa-mail icon i-sim fa-sim"></i></a>
</nav>Firefox 和 IE 中的菜单始终可见，剪辑路径不起作用。如何解决？
【问题讨论】：
-
CSS
clip-path在 FF 中不起作用。您需要使用 SVG 和url()语法来支持 FF。 IE 将不支持任何版本的clip-path。您可以通过Can I Use查看浏览器兼容性。 -
@Harry 谢谢，我怎样才能为两个浏览器隐藏这个
nav？ -
@Simone:This fiddle 使用了一种完全不同的方法，其属性在 IE 和 FF 上都受支持。如果你想走这条路，我会帮你进一步调整。
-
@Simone：除非我们使用额外的元素和一些复杂的东西，否则可以达到的最佳效果是this。它有点从圆形变成椭圆形，最后变成方形。
-
@Simone：用 JS 或许可以，但我真的不建议这样做。最好保持一致（不过更多的是个人选择）。顺便说一句，您介意我将其添加为答案吗？
标签： css internet-explorer firefox svg clip-path