如何在不同浏览器中实现一致的复选框和标签对齐？

跨浏览器一致地对齐复选框和标签

跨不同浏览器正确对齐复选框及其标签可能是一项艰巨的任务。为了实现跨浏览器的一致性，必须了解每个浏览器渲染引擎的细微差别。

在提供的标准 HTML 中：

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

通常应用 Eric Meyer 的重置样式表，最大限度地减少特定于浏览器的覆盖。然而，尽管它无处不在，在所有浏览器中对齐复选框和标签仍然是一个挑战。

跨浏览器对齐解决方案

经过广泛的实验，出现了一个满足以下要求的解决方案：满足以下要求：

• 复选框和标签分开行。
• 垂直对齐在浏览器中保持一致。
• 标签文本换行，而不延伸到复选框下方。

使用的 CSS 代码如下：

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;
}

通过将标签设置为显示为块并应用适当的填充和文本缩进，可以实现一致的标签。然后使用垂直对齐和相对定位将输入元素定位在标签内，确保在所有主要浏览器中对齐。

以上是如何在不同浏览器中实现一致的复选框和标签对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！