标签：在Chrome中未对齐和溢出之前

Question

我遇到了以下自定义单选按钮显示的CSS（Codepen）的问题：

＆＃13;

＆＃13;

/* Styling for form and fieldset - skip over this */

form {
  background: #eeeeee;
  border: 0.0625rem solid #c9c9c9;
  margin: 0.5rem;
  padding: 0.75rem 0.5rem 1.125rem;
}

fieldset {
  border: 0.0625rem solid #d0d0d0;
  border-radius: 0.125rem;
  margin: 0.125rem;
  padding: 0.5rem;
}


/* Styling for labels and input groups */

label {
  padding: 0.25rem 0.5rem;
}

.input-group {
  display: inline-block;
}


/* Hiding <input type="radio"> elements */

[type="radio"] {
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
}


/* Actual styling for the radio buttons */

.input-group [type="radio"]+label {
  position: relative;
  margin-left: 1.25rem;
  cursor: pointer;
}


/* Creates the little circle on the side */

.input-group [type="radio"]+label:before {
  display: inline-block;
  position: absolute;
  bottom: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  content: '';
  border: 0.0625rem solid #bdbdbd;
  border-radius: 0.125rem;
  background: #fafafa;
  color: #212121;
  margin-left: -1.25rem;
}


/* Focus and hover styling to highlight the circle */

.input-group [type="radio"]+label:hover:before,
.input-group [type="radio"]+label:focus:before {
  border-color: #0288d1;
}


/* Focus styling in case the input itself is focused, not the label */

.input-group [type="radio"]:focus+label:before {
  border-color: #0288d1;
}


/* Border radius for the circle */

.input-group [type="radio"]+label:before,
.input-group [type="radio"]+label:after {
  border-radius: 50%;
}


/* Styling for checked radio buttons */

.input-group [type="radio"]:checked+label:after {
  position: absolute;
  background: #212121;
  content: '';
  margin-left: -1.25rem;
  bottom: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
}

＆＃13;

<form style="width: 350px">
  <fieldset>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
    <div class="input-group">
      <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
      <label for="rad1">Duis erat eros, sagittis vitae risus varius</label>
    </div>
    <div class="input-group">
      <input type="radio" id="rad2" tabindex="0" name="radio-group-1">
      <label for="rad2">Sed volutpat efficitur dolor, id suscipit leo ultrices at</label>
    </div>
  </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;

虽然我创建的样式在Firefox中运行得非常好，但Chrome中似乎存在一些问题，如下图所示：

Firefox按预期显示标签和自定义单选按钮，正确对齐且没有任何文本溢出其父容器。另一方面，Chrome不对齐单选按钮的圆形框，以及一些标签的文本溢出其父容器。为什么会这样，以及如何解决？

Answer 1

将display: inline-block用于标签，并在此选择器.input-group [type="radio"]+label:before中将bottom属性替换为top：

＆＃13;

＆＃13;

/* Styling for form and fieldset - skip over this */

form {
  background: #eeeeee;
  border: 0.0625rem solid #c9c9c9;
  margin: 0.5rem;
  padding: 0.75rem 0.5rem 1.125rem;
}

fieldset {
  border: 0.0625rem solid #d0d0d0;
  border-radius: 0.125rem;
  margin: 0.125rem;
  padding: 0.5rem;
}


/* Styling for labels and input groups */

label {
  padding: 0.25rem 0.5rem;
}

.input-group {
  display: inline-block;
}


/* Hiding <input type="radio"> elements */

[type="radio"] {
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
}


/* Actual styling for the radio buttons */

.input-group [type="radio"]+label {
  position: relative;
  margin-left: 1.25rem;
  cursor: pointer;
  display: inline-block;
}


/* Creates the little circle on the side */

.input-group [type="radio"]+label:before {
  display: inline-block;
  position: absolute;
  top: 0.375rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  content: '';
  border: 0.0625rem solid #bdbdbd;
  border-radius: 0.125rem;
  background: #fafafa;
  color: #212121;
  margin-left: -1.25rem;
}


/* Focus and hover styling to highlight the circle */

.input-group [type="radio"]+label:hover:before,
.input-group [type="radio"]+label:focus:before {
  border-color: #0288d1;
}


/* Focus styling in case the input itself is focused, not the label */

.input-group [type="radio"]:focus+label:before {
  border-color: #0288d1;
}


/* Border radius for the circle */

.input-group [type="radio"]+label:before,
.input-group [type="radio"]+label:after {
  border-radius: 50%;
}


/* Styling for checked radio buttons */

.input-group [type="radio"]:checked+label:after {
  position: absolute;
  background: #212121;
  content: '';
  margin-left: -1.25rem;
  top: 0.625rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.625rem;
}

＆＃13;

<form style="width: 350px">
  <fieldset>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
    <div class="input-group">
      <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
      <label for="rad1">Duis erat eros, sagittis vitae risus varius</label>
    </div>
    <div class="input-group">
      <input type="radio" id="rad2" tabindex="0" name="radio-group-1">
      <label for="rad2">Sed volutpat efficitur dolor, id suscipit leo ultrices at</label>
    </div>
  </fieldset>
</form>

＆＃13;

＆＃13;

＆＃13;