我使用了从这里获取的纯 css 和 svg 切换开关复选框，=它在所有浏览器上都能完美运行，直到我的 Firefox 更新到新的 Firefox Quantum（版本 57.0），其中一半的开关没有被绘制。诚然，我的矢量技术很低，我对 Firefox Quantum 的了解不够，也不知道它出了什么问题。
任何帮助将不胜感激。
这是它在 Chrome 和资源管理器上的外观，这是在 Firefox Quantum 上
看起来像在 Firefox Quantum 中，正在绘制的路径是
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281'></path>
而不是完整路径，即
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
看起来浏览器忽略了大部分路径。
这是codepen，这是完整的代码：
html：
<div class='checkbox'>
<label class='checkbox__container'>
<input class='checkbox__toggle' type='checkbox'>
<span class='checkbox__checker'></span>
<span class='checkbox__txt-left'>On</span>
<span class='checkbox__txt-right'>Off</span>
<svg class='checkbox__bg' space='preserve' style='enable-background:new 0 0 110 43.76;' version='1.1' viewbox='0 0 110 43.76'>
<path class='shape' d='M88.256,43.76c12.188,0,21.88-9.796,21.88-21.88S100.247,0,88.256,0c-15.745,0-20.67,12.281-33.257,12.281,S38.16,0,21.731,0C9.622,0-0.149,9.796-0.149,21.88s9.672,21.88,21.88,21.88c17.519,0,20.67-13.384,33.263-13.384,S72.784,43.76,88.256,43.76z'></path>
</svg>
</label>
</div>
scss:
.ext-cross{
&:before, &:after{
content:"";
display: block;
position: absolute;
width: 14px;
height: 2px;
margin: 0 auto;
top: 20px;
left: 0;
right: 0;
background-color: #bf1e1e;
border-radius: 5px;
transition-duration: .3s;
}
&:before{
transform: rotateZ(45deg);
}
&:after{
transform: rotateZ(-45deg);
}
}
.ext-ok{
&:before, &:after{
background-color: #0cb018;
}
&:before{
width: 6px;
top: 23px;
left: -7px;
}
&:after{
width: 12px;
left: 5px;
}
}
//checkbox
.checkbox{
width: 100px;
margin: 0 auto 30px auto;
&__container{
display: block;
position: relative;
height: 42px;
cursor: pointer;
}
&__toggle{
display: none;
&:checked + .checkbox__checker{
left: calc(100% - 43px);
transform: rotateZ(360deg);
@extend .ext-ok;
}
}
&__checker, &__cross, &__ok{
display: block;
position: absolute;
height: 43px;
width: 43px;
top: -1px;
left: 0px;
z-index: 1;
@extend .ext-cross;
}
&__checker{
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 2px 6px rgba(0,0,0,.5);
transition: .3s;
z-index: 2;
&:before, &:after{
transition-duration: .3s;
}
}
&__cross, &__ok{
&:before, &:after{
background-color: #ddd;
}
}
&__ok{
@extend .ext-ok;
left: calc(100% - 43px);
}
&__txt-left, &__txt-right{
display: block;
position: absolute;
width: 42px;
top: 15px;
text-align: center;
color: #fff;
font-size: 12px;
z-index: 1;
}
&__txt-right{
right: 0px;
}
&__bg{
position: absolute;
top: 0;
left: 0;
fill: #aaa;
width: 100%;
height: 100%;
}
}
更新
它没有在旧版本的 Firefox 上测试，这是一个错误。