如何解决盒子里的绝对定位元素在不同分辨率下发生像素偏移？-html教程-PHP中文网

如何解决盒子里的绝对定位元素在不同分辨率下发生像素偏移？

心靈之曲

发布： 2024-11-11 15:00:33

原创

327人浏览过

如何解决盒子里的绝对定位元素在不同分辨率下发生像素偏移？

<h2>盒子里的绝对定位元素发生预期外的像素偏移？</h2>

在自定义输入框选择框样式时，可能会遇到这样的问题：在不同的分辨率下，代码设置居中的选择框小元素在不同的分辨率下仍不居中。

造成此问题的关键在于像素单位 (px) 在不同分辨率下可能产生移位。

为了解决此问题，请将所有像素单位替换为相对单位，例如：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

将宽度和高度的“15px”替换为“1rem”
将边框的“1px”替换为“0.1rem”
将小元素的大小（“10px”）替换为“0.6rem”
将小元素的边距（“-5px”）替换为“-0.3rem”

<h3>修改后的代码</h3>

修改后的代码如下：

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

登录后复制

通过这些改动，小元素的定位将独立于屏幕分辨率，始终居中对齐。

以上就是如何解决盒子里的绝对定位元素在不同分辨率下发生像素偏移？的详细内容，更多请关注php中文网其它相关文章！