3

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

4

1 回答 1

3

正如我在对该问题的评论中提到的，CSSclip-path在 Firefox 中不起作用。您需要使用 SVG 以及url()Firefox 支持的语法。IE（甚至 11 和 Edge）都不支持 CSS 或 SVG 版本的clip-path. 您可以在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>

于 2015-12-19T12:54:19.113 回答