다양한 브라우저에서 일관된 체크박스와 라벨 정렬을 달성하려면 어떻게 해야 합니까?

여러 브라우저에서 체크박스와 라벨을 일관되게 정렬

다양한 브라우저에서 체크박스와 라벨을 적절하게 정렬하는 것은 어려운 작업이 될 수 있습니다. 브라우저 간 일관성을 달성하려면 각 브라우저 렌더링 엔진의 미묘한 차이를 이해하는 것이 중요합니다.

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