브라우저 전반에 걸쳐 일관된 체크박스와 라벨 정렬을 달성하는 방법은 무엇입니까?

여러 브라우저에서 일관되게 확인란과 해당 레이블을 정렬하는 방법

이 질문은 다양한 브라우저, 특히 Safari, Firefox에서 확인란과 해당 레이블을 일관되게 정렬하는 데 직면하는 문제를 강조합니다. , 그리고 IE. 제공된 코드는 체크박스와 해당 레이블이 포함된 양식에 대한 표준 HTML 및 CSS를 보여줍니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!