如何对齐复选框及其标签始终跨浏览器

小编典典

如何对齐复选框及其标签始终跨浏览器

html

这是困扰我的CSS小问题之一。Stack Overflow周围的人们如何垂直对齐 checkboxes 以及他们
labels 始终如一的 跨浏览器 ？每当我在Safari中正确对齐它们（通常vertical-align: baseline在上使用input）时，它们在Firefox和IE中就完全关闭了。在Firefox中进行修复，不可避免地将Safari和IE弄乱了。每次编写表单时，我都会在此上浪费时间。

这是我使用的标准代码：

<form>

    <div>

        <label><input type="checkbox" /> Label text</label>

    </div>

</form>

我通常使用Eric Meyer的重置，因此表单元素相对而言是覆盖不大的。期待您提供的任何提示或技巧！

阅读 447

2020-05-10

共1个答案

小编典典

经过一个多小时的调整，测试和尝试不同样式的标记后，我认为我可能有一个不错的解决方案。该特定项目的要求是：

输入必须在自己的行上。
复选框输入需要在所有浏览器中都与标签文本垂直对齐（如果不一致）。
如果标签文本自动换行，则需要缩进（因此不要在复选框下方自动换行）。

在进行任何解释之前，我只为您提供代码：

label {

  display: block;

  padding-left: 15px;

  text-indent: -15px;

}

input {

  width: 13px;

  height: 13px;

  padding: 0;

  margin:0;

  vertical-align: bottom;

  position: relative;

  top: -1px;

  *overflow: hidden;

}


<form>

  <div>

    <label><input type="checkbox" /> Label text</label>

  </div>

</form>

此代码假定您使用的是类似Eric
Meyer的重置，该重置不会覆盖表单输入的边距和填充（因此会将边距和填充重置放置在输入CSS中）。显然，在实际环境中，您可能会嵌套/覆盖东西以支持其他输入元素，但我想让事情保持简单。

注意事项：

该*overflow声明是一个内联IE hack（星级属性hack）。IE 6和7都会注意到它，但是Safari和Firefox将适当地忽略它。我认为这可能是有效的CSS，但条件注释会更好。只是为了简单起见使用它。
据我所知，在vertical-align所有浏览器中唯一一致的语句是vertical-align: bottom。在Safari，Firefox和IE中，设置此值然后相对向上定位几乎相同，只有一个或两个像素差异。
使用对齐的主要问题是IE在输入元素周围粘了很多神秘的空间。它不是填充或边距，而是该死的持久性。在复选框上设置宽度和高度，然后overflow: hidden由于某种原因而切断了多余的空间，并使IE的定位与Safari和Firefox非常相似。
毫无疑问，根据文本的大小，您需要调整相对位置，宽度，高度等，以使外观看起来正确。

希望这对别人有帮助！除了今天早上正在研究的项目之外，我没有在其他项目上尝试过这种特定技术，因此，如果您发现一些更一致的方法，请务必进行尝试。

2020-05-10