问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
snail1t
    33
    新手上路，请多包涵

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

    自定义的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>
    前端css3htmlcsshtml5
    阅读 1.2k
    3 个回答
    得票最新
    头像
    Undest
      2.4k2517
      ✓ 已被采纳

      只要你使用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;
}
      头像
      一个凹
        259215

        以前遇到过这种情况，但是不记得用了什么方法，现在想的话，定位就可以了，看看一下代码(看注释后的代码，我添加的，这样会让元素脱离文档流，我没有处理这个，你可以给父元素设置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>
        头像
        peterhuan
          6812965

          可以使用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

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