如何实现跨浏览器一致的复选框和标签对齐？

如何跨浏览器一致地对齐复选框及其标签

这个问题强调了在不同浏览器（尤其是 Safari、Firefox）之间一致地对齐复选框及其标签所面临的挑战和IE。提供的代码展示了包含复选框及其标签的表单的标准 HTML 和 CSS。

曾经流行的一种解决方案涉及在输入上使用 Vertical-align: 基线以在 Safari 中正确对齐复选框。然而，这种方法经常导致 Firefox 和 IE 中的不对齐。

经过广泛的测试和调整，出现了不同的解决方案，其中涉及以下 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中文网其他相关文章！