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

这是困扰我的 CSS 的小问题之一。 Stack Overflow 周围的人们如何垂直对齐checkboxes并且他们的labels始终跨浏览器 ?每当我在 Safari 中正确对齐它们(通常在input上使用vertical-align: baseline )时,它们在 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>

这是JSFiddle 中的工作示例。

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

注意事项:

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

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

有时,垂直对齐需要两个相邻的内联元素(跨度,标签,输入等)才能正常工作。以下复选框在 IE,Safari,FF 和 Chrome 中正确垂直居中,即使文本大小非常小也是如此。

它们都在同一行上彼此相邻浮动,但是 nowrap 表示整个标签文本始终位于复选框旁边。

缺点是多余的无意义的 SPAN 标签。

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

现在,如果您有一个很长的标签文本需要在复选框下不包装而要包装,则可以在标签元素上使用填充和负文本缩进:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

One Crayon 解决方案的基础上 ,我有一些对我有用的东西,而且更简单:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
}
<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

在 Safari(我相信其基准)中以像素为单位呈现相同的内容,而 Firefox 和 IE7 都可以很好地检出。它也适用于各种大小的标签字体。现在,为了将 IE 的基准固定在选择和输入上...


更新:(第三方编辑)

正确的bottom位置取决于字体系列和字体大小!我发现使用bottom: .08em;复选框和单选元素具有很好的一般价值。我在带有 Arial 和 Calibri 字体的 Windows 中的 Chrome / Firefox / IE11 中使用几种小 / 中 / 大字体对它进行了测试。

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}
<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

看起来不错的一件容易的事是使用 vertical-align 调整复选框的垂直位置。跨浏览器,它仍然会有所不同,但是解决方案并不复杂。

input {
    vertical-align: -2px;
}

参考

尝试vertical-align: middle

您的代码似乎也应该是:

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

尝试我的解决方案,我在 IE 6,FF2 和 Chrome 中进行了尝试,它在所有三种浏览器中都逐像素渲染。

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

对我来说,唯一完美的解决方案是:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

今天测试在 Chrome,Firefox,歌剧,IE 7 和 8 实施例: 小提琴

我通常使用行高来调整静态文本的垂直位置:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

希望能有所帮助。

我还没有完全测试我的解决方案,但是它似乎工作得很好。

我的 HTML 很简单:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

然后,我将所有复选框的高度和宽度都设置为24px 。为了使文本对齐,我将标签的line-height 24px并分配了vertical-align: top;像这样:

编辑: IE 测试后,我添加了vertical-align: bottom;输入,并更改了标签的 CSS。您可能会发现需要一个条件 IE css 情况来整理填充 - 但文本和框是内联的。

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

如果有人发现这行不通,请告诉我。这是实际的操作(在 Chrome 和 IE 中 - 对屏幕截图在视网膜上使用并为 IE 使用并行表示歉意):

复选框的屏幕截图:Chrome复选框的屏幕截图:IE

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

诀窍是仅在表单元格中使用垂直对齐方式,如果使用标签标签,则仅在行内块中使用。