html - 用刻度删除边框

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;
}

.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;
}

<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

更新代码笔:https://codepen.io/anon/pen/LRLrNO