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

  • Z时代
  • 2024-01-10
  • 分类：问答

这是困扰我的CSS小问题之一。Stack Overflow周围的人们如何垂直对齐 以及他们 始终如一的 ？每当我在Safari中正确对齐它们（通常vertical-align:

baseline在上使用input）时，它们在Firefox和IE中就完全关闭了。在Firefox中进行修复，不可避免地将Safari和IE弄乱了。每次编写表单时，我都会在此上浪费时间。

这是我使用的标准代码：

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

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

回答：

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

  1. 输入必须在自己的行上。

  2. 复选框输入需要在所有浏览器中都与标签文本垂直对齐（如果不一致）。

  3. 如果标签文本自动换行，则需要缩进（因此不要在复选框下方自动换行）。

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

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非常相似。

  • 毫无疑问，根据文本的大小，您需要调整相对位置，宽度，高度等，以使外观看起来正确。

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

以上是 如何对齐复选框及其标签始终跨浏览器 的全部内容， 来源链接： utcz.com/qa/404275.html

回到顶部