Internet Explorer，Firefox和Chrome中的复选框对齐方式

2018-06-14 13:51:45

复选框与标签对齐（即垂直居中）跨越不同的网页浏览器会让我发疯。下面粘贴的是标准的html代码：

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

我测试了不同的CSS技巧（例如，链接1，链接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;
}

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

你有没有尝试用'display：table-cell'设置元素的CSS？我之前使用过这个技巧，因为对齐在跨浏览器时是个问题。

链接地址: http://www.djcxy.com/p/41463.html