最后，让我们看一下问题的根源
复选框是使用图片呈现的（一个可以通过CSS设置自定义）。这是FireFox中的一个（未选中的）复选框，以DOM检查器突出显示：
这是Chrome中相同的无样式复选框：
您可以看到边距（橙色）；填充不存在（将显示为绿色）。那么，复选框右侧和底部的伪利润是多少？这些是用于复选框的图像的一部分。这就是为什么仅使用vertical-align: middleJust不够用，这就是跨浏览器问题的根源。
那么我们该怎么办？
一个明显的选择是–替换图像！幸运的是，可以通过CSS做到这一点，并将其替换为外部图像，base64（in-CSS）图像，in-CSS svg或仅是伪元素。这是一种健壮的（跨浏览器！）方法，这是一个从该问题中窃取此类调整的示例：
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
display: inline-block;
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
你可能想了解这样的造型像一些列出了一些更有深度的文章在这里 ; 这超出了此答案的范围。
好吧，那还是没有自定义图像或伪元素的解决方案呢？
TL; DR：看来这行不通，请改用自定义复选框
首先，请注意，如果在其他浏览器中复选框图标内的那些伪边距是任意的，则没有一致的解决方案。要构建一个图像，我们必须在现有浏览器中探索此类图像的结构。
那么哪些浏览器的复选框中有伪边距？我已经检查了Chrome 75，Vivaldi 2.5（基于铬），FireFox 54（不要问为什么这样过时），IE 11，Edge 42，Safari ?? （借用一分钟，忘了签出版本）。只有Chrome和Vivaldi才有这种伪利润（我怀疑所有基于Chromium的浏览器也一样，例如Opera）。
这些伪利润的大小是多少？要弄清楚这一点，可以使用缩放复选框：
input {
zoom: 10;
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
我的结果是宽度/高度的7％，因此以绝对单位为0.9-1.0px。但是，准确性可能会受到质疑：请zoom为复选框尝试不同的值。在Chrome和Vivaldi的测试中，伪边距的相对大小在zoom值10、20和值11-19（??）上有很大不同：
scale 似乎更一致：
input {
transform: scale(10) translate(50%, 50%);
box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>
因此大约14％和2px是正确的值。
现在我们知道（？）伪边距的大小，让我们注意这还不够。所有浏览器的复选框图标的大小都一样吗？唉! 这是DOM检查器显示的无样式复选框的内容：
- 火狐：13.3px
- 基于铬的元素：整个元素为12.8 像素，因此对于可视为复选框的元素，其值为12.8（100％-14％）= 11 像素
- IE 11，边缘：13 像素
- Safari：不适用（我认为这些应该在同一屏幕上进行比较）
现在，在讨论任何解决方案或技巧之前，让我们问：什么是正确的对齐方式？我们要达到什么目标？在某种程度上，这是一个品味问题，但基本上我可以想到以下“不错”的对齐方式：
文字和复选框位于同一基线上（我故意不在此处调整复选框大小）：
或在小写字母方面具有相同的中间行：
或用大写字母表示相同的中间行（更容易看出不同字体大小的差异）：
并且我们还必须确定复选框的大小是否应等于小写字母，大写字母或其他大小（更大，更小或介于小写和大写之间）的高度。
在此讨论中，如果复选框与文本位于同一基线上并且具有大写字母的大小（这是一个非常有争议的选择），那么我们将对齐方式称为“不错”。
现在，我们必须使用哪些工具：
- 调整复选框大小
- 通过伪距复选框识别Chromium并设置特定样式
- 调整复选框/标签垂直对齐
？
关于复选框大小调节：有width，height，size，zoom，scale（有我错过了什么？）。zoom并且scale不允许设置绝对大小，因此它们可能仅有助于调整文本大小，而不能设置跨浏览器大小（除非我们可以编写特定于浏览器的规则）。size不适用于Chrome（它是否可以与旧版IE一起使用？无论如何，它并不是那么有趣）。width和height可以在Chrome和其他浏览器中使用，因此我们可以设置一个通用大小，但是在Chrome中，它可以设置整个图片的大小，而不是复选框本身的大小。注意：它是最小值（宽度，高度），用于定义复选框的大小（如果宽度≠高度，则复选框正方形外部的区域将添加到“伪边距”中）。
不幸的是，据我所知，对于任何宽度和高度，Chrome复选框中的伪边距均未设置为零。
恐怕这些天没有可靠的纯CSS方法。
让我们考虑垂直对齐。vertical-align设置为middle或baseline由于Chrome的伪边距而不能给出一致的结果，对于所有浏览器来说，获得相同“坐标系”的唯一真实选择是对齐标签并输入到top：
（在图片上：垂直对齐：顶部，底部和底部无框阴影）
那么我们从中得到什么结果呢？
input[type="checkbox"] {
height: 0.95em;
width: 0.95em;
}
label, input {
vertical-align: top;
}
<label><input type="checkbox">label</label>
上面的代码段适用于Chrome（基于Chromium的浏览器），但是其他浏览器需要较小的复选框。似乎无法以Chromium复选框图像怪异的方式调整大小和垂直对齐方式。我的最终建议是：改用自定义复选框-这样可以避免感到沮丧：)
