擦除了规模的边界

Question

有风格化的输入，但是放大/缩小，它们会改变大小，好像边框丢失了，我无法理解出了什么问题，提前谢谢。

My codepen

例如，Chrome - 缩放75％

<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male

Answer 1

这是因为您使用绝对定位标签覆盖其父级部分以使其看起来具有边框，并且当页面被缩放时，取决于浏览器计算其位置的方式，它向上和向下跳跃一个像素，因此有时会与其父级边缘完全对齐。

像这样更新你的css，改为使用边框，它会正常工作。

.checkbox-remember-me {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    border: 1px solid #666;
    margin-left: 34px;
    margin-right: 10px;
}
.checkbox-remember-me   label {
    width: 22px;
    height: 22px;
    cursor: pointer;
    position: absolute;
    background: #eee;
    margin: 1px;
}

＆＃13;

＆＃13;

.checkbox-remember-me {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  border: 1px solid #666;
  margin-left: 34px;
  margin-right: 10px;
}
.checkbox-remember-me label {
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  background: #eee;
  margin: 1px;
}
.checkbox-remember-me label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 3px solid red;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  transform: rotate(-45deg);
}
.checkbox-remember-me label:hover:after {
  opacity: 0.3;
}
input[type=radio] {
  display: none;
}
input[type=radio]:checked + label:after {
  opacity: 1;
}

＆＃13;

<h4>Gender</h4>
<div class="checkbox-remember-me">
  <input type="radio" name="gender" id="male" checked/>
  <label for="male"></label>
</div>Male
<div class="checkbox-remember-me">
  <input type="radio" name="gender" id="female" />
  <label for="female"></label>
</div>Female

＆＃13;

＆＃13;

＆＃13;

更新了codepen：https://codepen.io/anon/pen/LRLrNO