如何使div内复选框在各浏览器中保持一致的相对位置？

不同浏览器对表单元素的默认样式（如边距、内边距、垂直对齐方式）存在细微差异，这是导致你遇到定位问题的核心原因——仅仅替换单位无法抵消这些默认样式的影响。以下是几个可靠的解决方法：

• 重置默认样式，统一基础属性
  先清除浏览器对复选框和标签的默认边距、内边距，再统一设置垂直对齐方式，确保元素的基础布局一致：

  input[type="checkbox"] {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    box-sizing: border-box;
  }
  
  label {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;
  }
  

  加上box-sizing: border-box可以确保元素的尺寸计算方式在所有浏览器中一致，避免因盒模型差异导致的偏移。

• 使用Flexbox布局彻底统一对齐
  Flexbox是跨浏览器布局的最优方案，能完全控制元素的对齐方式，摆脱默认样式的干扰。建议先调整HTML结构（把文本放入label内，语义更合理），再用Flex控制布局：

  <div class="checkbox-wrap">
    <label>
      <input type="checkbox" onclick="passwordOne(); passwordTwo()">
      Show Password
    </label>
  </div>
  

  对应的CSS：

  .checkbox-wrap {
    display: flex;
    align-items: center; /* 垂直居中对齐复选框和文本 */
    gap: 8px; /* 统一设置复选框与文本的间距 */
  }
  
  .checkbox-wrap input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px; /* 固定尺寸，消除浏览器默认尺寸差异 */
  }
  

• 消除继承样式的干扰
  检查父元素是否有line-height、text-align等属性影响布局，统一设置这些属性：

  .checkbox-wrap label {
    line-height: 1.2; /* 固定行高，避免垂直方向的偏移 */
  }
  

这些方法组合使用，就能确保复选框在Chrome、Edge及其他主流浏览器中的位置基本一致。

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