Codepen 动画在 Chrome 中工作但在 Mozilla 中不工作，怎么了？ [复制]

Question

codepen 代码 (http://codepen.io/msisto/pen/lCofE) 在 Chrome 中运行时显示正确的动画，但在 Mozilla Firefox 中打开时未正确显示。代码块中是否缺少任何内容，或者我是否需要包含任何字符串才能使代码在 Mozilla 中工作？

CSS代码如下：-

// Customize
$option-color: #cbd1d8;
$checked-option-color: #40e0d0;
$option-size: 40px;
$explosion-distance: 5; // Multiplied by $option-size
$explosion-duration: 0.65s;

// On-click animation
@include keyframes(click-wave) {
$offset: ((($option-size*$explosion-distance)-$option-size)/2);

0% {
@include size($option-size);
opacity: 0.35;
position: relative;
}

100% {
@include size($option-size*$explosion-distance);
margin-left: -$offset;
margin-top: -$offset;
opacity: 0.0;
}
}

// Checkbox/Radio replacement
.option-input {
@include appearance(none);
@include position($option-size/3 0 0 0);
@include size($option-size);
@include transition;
background: $option-color;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
z-index: 1000;

&:hover {
background: darken($option-color, 15%);
}

&:checked {
background: $checked-option-color;

// The checkmark
&::before {
  @include size($option-size);
  @include position(absolute);
  content: '\2716';
  display: inline-block;
  font-size: $option-size/1.5;
  text-align: center;
  line-height: $option-size;
 }

 // The "wave"
 &::after {
  @include animation(click-wave $explosion-duration);
  background: $checked-option-color;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
  }
  }

  &.radio {
  border-radius: 50%;    

  &::after {
  border-radius: 50%;
  }
  }
  }

  // Demo styles
  body {
  @include box(horizontal, start, stretch);
  background: #e8ebee;
  color: darken($option-color, 15%);
  font-family: $helvetica;
  text-align: center;

  div {
  padding: 5rem;
  }

  label {
  display: block;
  line-height: $option-size;
  }
  }

Answer 1

为什么？

问题源于输入标签上的伪元素；因为它们是 void 元素，所以它们在技术上是不允许的伪元素（技术上是子元素）。 Chrome 可以正常工作，因为它没有严格遵守规则，而 Firefox 显示正确的行为。

为了清楚起见，这就是 ::before 和 ::after 在 div 上的样子：

<div>
  <span>I am :before</span>
  I am content of div
  <span>I am :after</span>
</div>

它在里面创建了两个孩子。输入是不可能的，因为它不能有孩子。

Here is another question I answered 有同样的问题，也有同样的解决方法。

解决方案？

• 使用标签元素本身创建复选框替换。标签通过匹配的 for 和 id 属性连接到其对应的输入。

• 当检查输入时，它的对应标签以input:checked + label为目标，仅选择输入后面的直接标签

• 实际的标签文本放置在一个跨度中，以便可以将其推到您的复选框之外

看起来像这样：

<input id="check-one" type="checkbox" class="option-input checkbox" CHECKED />
<label for="check-one"><span>Hello</span></label>

工作示例

这并不完美，需要进行调整；这只是为了给你一个大致的想法。

Here is your new codepen 和原版 CSS 中的演示如下：

input[type=checkbox],
input[type=radio] {
  display: none;
}
@-webkit-keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0.0;
  }
}
@-moz-keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0.0;
  }
}
@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0.0;
  }
}
.option-input + label {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: none;
  position: relative;
  margin-right: 0.5rem;
  z-index: 1000;
}
.option-input + label span {
  position: absolute;
  left: 100%;
  color: #000;
  margin-left: 10px;
}
.option-input + label:hover {
  background: #9faab7;
}
.option-input + label.radio {
  border-radius: 50%;
}
.option-input + label.radio::after {
  border-radius: 50%;
}
.option-input:checked + label {
  background: #40e0d0;
}
.option-input:checked + label::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '\2716';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 40px;
  left: 0;
}
.option-input:checked + label::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
  pointer-events: none;
}
body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -ms-flex-align: stretch;
  background: #e8ebee;
  color: #9faab7;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  text-align: center;
}
body div {
  padding: 5rem;
}
body label {
  display: block;
  line-height: 40px;
}

<div>

  <input id="check-one" type="checkbox" class="option-input checkbox" CHECKED />
  <label for="check-one"><span>Hello</span>
  </label>

</div>
<div>

  <input id="radio-one" type="radio" class="option-input radio" name="example" />
  <label for="radio-one" class="radio"><span>Hello</span>
  </label>
</div>