html - 为什么 HTML 复选框比其他复选框多消耗一个像素？

Question

我正在尝试构建一个工具栏，其中包含这样一个复选框。

<div class="toolbar"><div class="widget-toolbar">
        <ul class="items">

        <li class="toolbar-button item">
        Record
    </li><li class="toolbar-button item">
        Load
    </li><li class="toolbar-button item">
        Save
    </li><li class="toolbar-button item">
        Clear
    </li><li class="toolbar-checkbox item">
        <input type="checkbox" id="1369637447465" value="true">
        <label for="1369637447465" style="-webkit-user-select: none;">Continuous check</label>
    </li></ul>
    </div></div>

但是正如您在这个 fiddle 中看到的那样 http://jsfiddle.net/9WSpa/它的结果在工具栏的底部顶部和每个按钮的边框顶部之间有一个像素空间。现在，如果您从 ul 中删除复选框，则像素线消失，一切正常。谁能告诉我，为什么复选框比其他复选框多消耗一个像素？

提前致谢克里斯

Answer 1

如果您使用开发人员工具检查单选按钮，您会发现 input[type=radio"] 有一个默认边距。这个边距是额外像素的来源。

user agent stylesheet input[type="checkbox"] {
margin: 3px 3px 3px 4px;
}

解决方法:

input[type="checkbox"] {
 margin: 0;
}