css - 剪辑路径在 Firefox 和 IE 中不起作用

Question

我有一个 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 中的菜单始终可见，clip-path 不起作用。如何解决？

Answer 1

正如我在对问题的评论中提到的，CSS clip-path 在 Firefox 中不起作用。您需要将 SVG 与 url() 语法一起使用以获得 Firefox 支持。 IE(甚至 11 和 Edge)都不支持 clip-path 的 CSS 或 SVG 版本。您可以在 Can I Use 查看浏览器兼容性图表.

您可以使用 max-width、max-height、border-radius 和 overflow属性以获得与您需要的类似的输出。下面是一个应该适用于所有浏览器的示例代码段。

/* start nav menu morph */

nav {
  margin-top: 10px;
  width: 23%;
  background: #222222;
  color: rgba(255, 255, 255, 0.87);
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  overflow: hidden;
  transition: max-height .375s, max-width .375s, border-radius .125s .25s;
}
nav:hover {
  max-height: 500px;
  max-width: 500px;
  border-radius: 0%;
  transition: max-height .75s ease-out, max-width .75s ease-out, border-radius .75s ease-out;
}
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;
  margin-left: -5px;
  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 */

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