自定义圆形复选框页面缩放时内部选中态偏移变形问题求助

你开发的Chrome扩展里，自定义圆形checkbox在页面缩放时内部选中态会偏移变形，核心问题出在固定像素偏移和百分比translate的精度适配上，浏览器缩放时的小数像素计算会让这类定位方式失效。

核心修复点 #

• 移除checkbox上的固定像素left:-4px和top:-1px，改用margin和vertical-align调整对齐，避免缩放时错位
• 内部选中圆点改用绝对定位+transform居中的方式，替代百分比translate，这种方式在任何缩放比例下都能保持中心对齐

修改后的完整代码 #

style.css

.user_abuser_block {
  position: fixed;
  top: 67px;
  left: 528px;
  width: 223px;
  height: 110px;
  border-radius: 13px;
  padding-top: 12px;
  padding-left: 12px;
  /* 新增背景和阴影，避免和页面内容重叠 */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.checkbox-container {
  position: relative;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  vertical-align: middle;
  border: 0.1em solid #656565;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  /* 用margin调整和文字的间距，替代原固定像素偏移 */
  margin: 0 8px 0 0;
}

.checkbox-container:checked {
  border-color: #71aaeb;
}

.checkbox-container:checked::before {
  content: "";
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  background-color: #71aaeb;
  border-radius: 50%;
  /* 绝对定位居中：top/left设50%，再用translate拉回自身一半尺寸 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.label-container {
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
  /* 加line-height让文字和checkbox垂直对齐更稳定 */
  line-height: 1.2em;
}

script.js（无需修改）

const user_abuser_block = document.createElement('div');
user_abuser_block.classList.add('user_abuser_block');
user_abuser_block.style.zIndex = '9999';
document.body.appendChild(user_abuser_block);

const checkbox1 = document.createElement('input');
checkbox1.classList.add('checkbox-container');
checkbox1.setAttribute('type', 'checkbox');
checkbox1.setAttribute('checked', true);

const enabledLabel = document.createElement('label');
enabledLabel.classList.add('label-container');
enabledLabel.appendChild(checkbox1);
enabledLabel.appendChild(document.createTextNode('Enabled'));
user_abuser_block.appendChild(enabledLabel);

const checkbox2 = document.createElement('input');
checkbox2.classList.add('checkbox-container');
checkbox2.setAttribute('type', 'checkbox');

const disabledLabel = document.createElement('label');
disabledLabel.classList.add('label-container');
disabledLabel.appendChild(checkbox2);
disabledLabel.appendChild(document.createTextNode('Disabled'));
user_abuser_block.appendChild(disabledLabel);

修复原理 #

1. 移除固定像素偏移：固定像素在页面缩放时会和em单位的尺寸比例失调，改用margin和vertical-align控制对齐，能适配所有缩放比例
2. 绝对定位居中：top:50%;left:50%;transform:translate(-50%,-50%)是目前最稳定的元素居中方式，无论父元素尺寸如何变化（包括缩放导致的小数像素），都能保持子元素在正中心，不会出现偏移

内容的提问来源于stack exchange，提问作者gle6