Internet Explorer、Firefox 和 Chrome 中的复选框对齐答案

【问题标题】：Checkbox alignment in Internet Explorer, Firefox and ChromeInternet Explorer、Firefox 和 Chrome 中的复选框对齐
【发布时间】：2011-06-08 08:26:36
【问题描述】：

复选框与其标签的对齐方式（即垂直居中）跨不同的网络浏览器让我抓狂。下面粘贴的是标准的html代码：

<label for="ch"><input id="ch" type="checkbox">My Checkbox</label>

我测试了不同的 CSS 技巧（例如，link 1、link 2）；大多数解决方案在 FF 中运行良好，但在 Chrome 或 IE8 中完全关闭。

我正在寻找解决此问题的任何参考或指针。提前致谢。

编辑

根据 Elq 的建议我修改了 HTML

<div class="row">
<input type="checkbox" id="ch1" />
<label for="ch1">Test</label>
</div>

和 CSS

.row{
  display: table-row;
}

label{
  display: table-cell;
  vertical-align: middle;
}

现在可在 Windows 上的 Firefox、Internet Explorer 8 和 Chrome 中使用。在 Linux 上的 Firefox 和 Chrome 上失败。也适用于 Mac 上的 Firefox 和 Safari，但在 Chrome 上失败。

【问题讨论】：

标签： html css checkbox cross-browser label

【解决方案1】：

您是否尝试使用“display:table-cell;”设置元素的 CSS？我之前使用过这个技巧，当对齐是跨浏览器的问题时。

【讨论】：

感谢您的回复。我使用表格单元修改了代码。请参阅上面我编辑的帖子。