Safari 및 IE 선택 목록에 패딩이 적용되지 않는 문제를 해결하는 방법은 무엇입니까?

Safari 및 IE 선택 목록에 패딩이 적용되지 않음: 문제 해결 가이드

W3 사양을 준수함에도 불구하고 패딩이 렌더링되지 않을 수 있습니다. Safari 및 IE 브라우저에서 목록을 선택하세요. 이러한 불일치는 해당 브라우저에서 사용하는 렌더링 엔진의 제한으로 인해 발생합니다.

문제 이해

코드 샘플:

<select style="padding-left:15px">
  <option>male</option>
  <option>female</option>
</select>

Safari 및 IE가 지정된 왼쪽 패딩을 적용하지 못했습니다.

해결 방법: 텍스트 들여쓰기 활용

패딩이 지원되지 않으므로 텍스트 들여쓰기를 사용하는 대안이 있습니다. 이 속성은 선택 목록 내의 텍스트를 지정된 양만큼 이동하여 패딩 효과를 만듭니다.

코드 수정

CSS에서 padding-left 속성을 바꿉니다. 텍스트 들여쓰기 포함:

#sexID {
  text-indent: 15px;
  width: 258px; // Adjusted for text-indent
}

참고: 텍스트 들여쓰기에 맞게 선택 목록의 너비를 조정해야 합니다.

추가 고려 사항

• 선택한 CSS 문서 유형이 패딩 적용을 방해하지 않는지 확인하세요.
• 사용자 정의 CSS를 재정의할 수 있는 브라우저별 스타일시트를 확인하세요.
• 브라우저 개발자 도구를 사용하세요. 렌더링된 HTML 및 CSS를 검사하여 잠재적인 충돌을 식별합니다.

위 내용은 Safari 및 IE 선택 목록에 패딩이 적용되지 않는 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!