如何修复Chrome浏览器中复选框勾选标记的偏移问题？

问题描述 #

我正在为组件库开发复选框，设计师要求使用自定义SVG作为勾选标记。该复选框在Firefox中显示正常，但在Chrome中SVG会向上偏移，调整容器的flex属性无法解决问题。

Firefox显示效果 #

Chrome显示效果 #

现有代码 #

JSX代码 #

<label>
  <input
    type="checkbox"
    className={'checkbox'}
    {...rest}
    ref={ref}
  />
  <span className="checkbox-label">
    {label}
  </span>
</label>

CSS代码 #

.checkbox {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Label style */
.checkbox + .checkbox-label {
  cursor: pointer;
  display: flex;
  gap: 8px;
}

/* Checkbox un-checked style */
.checkbox + .checkbox-label::before {
  box-sizing: border-box;
  content: "";
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  max-width: 24px;
  width: 24px;
  height: 24px;
}

/* Checked checkbox style */
.checkbox:checked + .checkbox-label::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  color: white;
  background-color: #bcbcbc;
  border: none;
}

解决方案 #

问题根源是Chrome对content: url()的渲染行为和Firefox不一致——它会将SVG作为替换元素处理，默认对齐方式导致偏移。可以通过以下两种方法修复：

方法1：用background-image替代content: url() #

将SVG作为背景图插入，能更稳定地控制位置，跨浏览器表现更一致：

.checkbox:checked + .checkbox-label::before {
  content: ""; /* 清空原有content */
  color: white;
  background-color: #bcbcbc;
  border: none;
  /* 添加背景图并居中 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

方法2：给伪元素添加垂直对齐样式 #

如果坚持使用content: url()，可以通过调整垂直对齐和行高来修正偏移：

.checkbox:checked + .checkbox-label::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  color: white;
  background-color: #bcbcbc;
  border: none;
  vertical-align: middle;
  line-height: 24px; /* 和伪元素高度保持一致 */
}

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