【问题标题】：Checkbox causes incorrect height on parent element复选框导致父元素高度不正确
【发布时间】：2020-08-22 13:49:51
【问题描述】：

我正在尝试解决一个让我和我的同事头痛欲裂的问题。尽管我们每个人都获得了止痛药，但我们仍然对 Google Chrome 在具有font-size 或10pt 的容器中呈现复选框的方式感到困惑。

问题

Google Chrome 似乎在复选框元素周围呈现了一些我似乎无法摆脱的额外空间。复选框及其父元素必须为15 像素高。将父元素的 font-size 设置为 10pt 会导致该父元素的高度为 16 像素。

一个例子

看看下面的sn-p。

我还没有弄清楚（或理解）是什么原因导致复选框元素呈现为 15 像素高但有效地使其父元素变为 16 像素高。

td,
th
{
    padding: 0;
    font-size:   10pt;
}

input[type=checkbox]
{
    height: 15px;
    border: none;
    padding: 0;
    margin: 0;
}

<table width="100%" class="data">
    <tr>
        <th>Label 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Checkbox 2</th>
        <td><input type="checkbox" disabled="disabled" /></td>
    </tr>
    <tr>
        <th>Label 3</th>
        <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
    </tr>
</table>

^{将表格换成div、p 或任何其他容器也会导致该容器的高度不正确。}

可能的解决方案？

将复选框高度设置为 14px 会使父行 15 像素高。但是复选框本身不符合设计者的要求，因此该解决方案不会被接受。有什么解决方法吗？

【问题讨论】：

将display复选框类型更改为block?
其实input有一个默认的font属性。如果将font-family: sans-serif 添加到td，似乎可以纠正差异。
致因“不清楚你在问什么”而要求关闭帖子的人：我的问题到底有什么不清楚的地方？如果你愿意参与对话，我可以改进我的帖子。

标签： css google-chrome checkbox

【解决方案1】：

input 具有默认的font 属性：

font: 13.3333px Arial

如果您确保相邻单元格中的输入和文本都是相同的字体，则应该消除行高的差异（我认为）。

另外，将display: block 添加到input

td,
th {
  padding: 0;
  font-size: 10pt;
  font-family: sans-serif;
}

input[type=checkbox] {
  height: 15px;
  border: none;
  padding: 0;
  margin: 0;
  display: block;
}

<table width="100%" class="data">
  <tr>
    <th>Label 1</th>
    <td>Value 1</td>
  </tr>
  <tr>
    <th>Checkbox 2</th>
    <td><input type="checkbox" disabled="disabled" /></td>
  </tr>
  <tr>
    <th>Label 3</th>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
</table>

【讨论】：

有什么办法可以避免使用display: block？当文本或其他元素必须靠近时，我们希望避免使元素浮动。
@BobKruithof 如果没有它，我找不到获得相同外观的方法。我不确定我是否理解 display: block 引入的问题 - 你能详细说明一下吗？
如果该元素将display 属性设置为block，则该元素旁边的任何文本都需要包装在容器中以进行定位。所以不是[input element] foo bar apple orange，而是[input element][container]foo bar apple orange[/container]
@BobKruithof 更新了我的答案.. 我希望我正确理解了您的评论！如果我没有，也许你可以用你正在寻找的图像来更新你的问题
谢谢，但是如果您查看我的第一条评论，您会发现我正在努力避免浮动。您的答案的先前版本确实提供了足够的解决方案，因此如果您将其还原，我可以接受它作为答案。

【解决方案2】：

另一种解决方案：

首先，将display: block; 添加到input。

您可以使用box-sizing 属性更改父行为。

td {
   box-sizing: content-box;
}

应该可以解决您的问题。

td,
th {
   padding: 0;
   font-size:   10pt;
}
    
tr {
   box-sizing: content-box;
}
    
input[type=checkbox]{
   display: block;
   height: 15px;
   border: none;
   padding: 0;
   margin: 0;
}

<table width="100%" class="data">
    <tr>
        <th>Label 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th>Checkbox 2</th>
        <td><input type="checkbox" disabled="disabled" /></td>
    </tr>
    <tr>
        <th>Label 3</th>
        <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
    </tr>
</table>

【讨论】：

【解决方案3】：

我在 2020 年也遇到了这个问题，在 Chrome 和 Firefox 上，这里的解决方案都不起作用。这对我有用


input[type=checkbox] {
    height: 21px;
    vertical-align: top;
    position:relative;
    top:-5px;
}

.checkboxcontainer{
    max-height: 16px;
}

在我的例子中，我们有一个结构

<div>
    <div data-x="lots of these" />
    <div data-x="lots of these" />
    <div data-x="lots of these" />
    <div>
        <div class="checkboxcontainer">
             <input type="checkbox" ...>

并且外部 div 被赋予了巨大的上边距。删除 f12 中的复选框确认该复选框是罪魁祸首，并且提供的 css 似乎工作正常

【讨论】：