剪辑路径在 Firefox 和 IE 中不起作用
Clip-path doesn't work in Firefox and IE
我有一个 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
在 Firefox 中不起作用。您需要将 SVG 与 url()
语法一起用于 Firefox 支持。 IE(甚至 11 和 Edge)既不支持 CSS 也不支持 clip-path
的 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>
我有一个 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
在 Firefox 中不起作用。您需要将 SVG 与 url()
语法一起用于 Firefox 支持。 IE(甚至 11 和 Edge)既不支持 CSS 也不支持 clip-path
的 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>