盒子里的绝对定位元素发生预期外的像素偏移?

盒子里的绝对定位元素发生预期外的像素偏移

自定义的input checkbox的选择框样式,在不同的分辨率下,代码设置了居中但不居中(是选中时红色的小元素相对于外框不居中!!)

选中checkbox表现
checkbox图片
checkbox图片
checkbox图片

图片看可以看到是不居中的!!
尝试过不同的居中方式,还是会在不同的分辨率下会产生偏移,但是放大看确实居中的

代码

  <style>
    .clause-content {
      display: flex;
      flex-direction: row;
      align-items: start;
    }

    .clause-input {
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      cursor: pointer;
      position: relative;
      background-color: #fff;
      margin-right: 12px;
      border: 1px solid rgba(237, 30, 14, 0.15);
    }

    .clause-input input {
      opacity: 0;
    }

    .clause-input input:checked+i {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      /* transform: translate(-50%, -50%); */
      background-color: #ED1C24;
    }
  </style>
  <div class="clause-content">
    <label class="clause-input checkbox-hack">
      <input type="checkbox" name="clauseEnquiry" class="js_clauseEnquiry" id="clauseEnquiry">
      <i></i>
    </label>
    <label class="clause-text" for="clauseEnquiry">clause.</label>
  </div>
阅读 1.2k
3 个回答

只要你使用px,像素点在不同分辨率下就可能会有移位的问题。都换成相对单位来计算就可以解决这个问题,我这里的数字是对照px大概给的,你可以按实际情况调整:

.clause-content {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.clause-input {
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  margin-right: 0.8rem;
  border: 0.1rem solid rgba(237, 30, 14, 0.15);
}

.clause-input input {
  opacity: 0;
}

.clause-input input:checked + i {
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.3rem;
  margin-top: -0.3rem;
  /* transform: translate(-50%, -50%); */
  background-color: #ed1c24;
}

以前遇到过这种情况,但是不记得用了什么方法,现在想的话,定位就可以了,看看一下代码(看注释后的代码,我添加的,这样会让元素脱离文档流,我没有处理这个,你可以给父元素设置padding-left来避免重叠):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .clause-content {
      display: flex;
      flex-direction: row;
      align-items: start;
      border: 1px solid #ddd;
      /* 子绝父相让元素居中 */
      position: relative;
    }

    .clause-input {
      display: inline-block;
      vertical-align: middle;
      width: 15px;
      height: 15px;
      cursor: pointer;
      /* 子绝父相来让元素居中 */
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      margin-right: 12px;
      border: 1px solid rgba(237, 30, 14, 0.15);
    }

    .clause-input input {
      opacity: 0;
    }

    .clause-input input:checked+i {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
      /* transform: translate(-50%, -50%); */
      background-color: #ED1C24;
    }
  </style>
</head>

<body>
  <div class="clause-content">
    <label class="clause-input checkbox-hack">
      <input type="checkbox" name="clauseEnquiry" class="js_clauseEnquiry" id="clauseEnquiry">
      <i></i>
    </label>
    <label class="clause-text" for="clauseEnquiry">clause.</label>
  </div>
</body>

</html>

可以使用background-image渐变来自定义这个checkbox,不需要用到绝对定位,并且更简洁。

.custom-checkbox {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(237, 30, 14, 0.15);
  background-image: var(--form-check-bg-img);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
  &:checked {
    --form-check-bg-img: linear-gradient(to right, blue, blue);
  }
}
<input type="checkbox" class="custom-checkbox" />

stacblitz

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题