CSS 在 Firefox（96 及更早版本）上的表现与在 Chrome 上的表现不同

Question

我知道这是一个被广泛讨论的话题，但当涉及到 Firefox 如何使用 ::before 和 ::after[ 呈现元素时，我一直在努力寻找适用于我的用例的指南=19=]

我看到了使用 -moz-appearance: initial; 的建议，但没有用 - 我的输入不包含其他元素，所以它肯定违背了不支持子元素的输入的通常论点？

任何变通建议都会非常有用

编辑：在一些有用的评论指出这对某些用户来说不是问题之后，我将我的 Firefox 从 96 更新到 97，现在它也适用于我，但我仍然热衷于解决这个问题对于可能没有使用最新 Firefox 的用户来说，潜在的“遗留”问题？

在 Chrome 上：

在 Firefox 上：

.outter-wrapper {
  width: 200px;
  border: 1px solid black;
}

.wrapper {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 8px 24px 8px 0px;
  width: 100%;
}

.input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.label-wrapper {
 line-height: 1.5rem;
  position: absolute;
  left: 10px;
}


.label {
  position: relative;
  margin-bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: 12px;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.label:before {
  display: block;
  min-width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 1px solid black;
  border-radius: 4px;
  position:absolute;
  top:0;
}

.label:after {
  position: absolute;
  display: block;
  height: 20px;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

input[type="checkbox"]:checked~.label::after {
  background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
  width: 20px;
  height: 20px;
  top: 0;
}

<div class="outter-wrapper">  
  <div class="wrapper">
    <input class="input" name="checkbox2" id="checkbox2"        type="checkbox">
    <label class="label" for="checkbox2">
      <div class="label-wrapper">
        Only works in Chrome
      </div>  
    </label>
  </div>
</div>

Answer 1

在 v96 中，::before 和 ::after 未被考虑在标签的 flex 布局中。

我们可以在没有亚麻布局的情况下获得相同的结果：

.outter-wrapper {
  width: 200px;
  border: 1px solid black;
}

.wrapper {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 8px 24px 8px 0px;
  width: 100%;
}

.input {
  position: absolute;
  z-index: -1;
  visibility: hidden;
}

.label-wrapper {
  line-height: 1.5rem;
  position: absolute;
  left: 10px;
}

.label {
  position: relative;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 12px;
  flex: 1;
}

.label::before {
  position: absolute;
  right: 0;
  display: block;
  min-width: 20px;
  height: 20px;
  content: "";
  background-color: #fff;
  border: 1px solid black;
  border-radius: 4px;
}

.label::after {
  position: absolute;
  right: 0;
  display: block;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

input[type="checkbox"]:checked~.label::after {
  background-image: url("https://cdn-icons-png.flaticon.com/512/447/447147.png");
  width: 20px;
  height: 20px;
  top: 0;
}

<div class="outter-wrapper">
  <div class="wrapper">
    <input class="input" name="checkbox2" id="checkbox2" type="checkbox">
    <label class="label" for="checkbox2">
        <div class="label-wrapper">
          Only works in Chrome
        </div>
      </label>
  </div>
</div>

CSS 在 Firefox（96 及更早版本）上的表现与在 Chrome 上的表现不同

CSS is behaving differently on Firefox (version 96 and older) than it is on Chrome

html

css

firefox

pseudo-element