Select의 최고의 사전 설정은 모든 브라우저와 완벽하게 호환됩니다. select_HTML/Xhtml_웹 페이지 제작

각 브라우저의 select 태그 속성과 각 브라우저의 지원이 다소 다르기 때문에 각 브라우저에서 선택 상자가 다르게 표시되는 것으로 알고 있습니다. 다음으로 기본 모양 CSS를 지원하여 완벽하게 호환되는 선택을 만들어 보겠습니다. 속성.
제어 변수를 사용하여 선택의 높이, 패딩 및 줄 높이를 제어하고 DEMO를 작성하여 각 브라우저에서 height.100.padding.0, height.no.padding.100, no의 세 가지 상황을 테스트했습니다. height.no.padding 결과는 각 브라우저의 링크 이미지와 같습니다. DEMO 모습

다음과 같은 연구속성을 얻을 수 있습니다.

	ie6	ie7	ie8	ie9	ff	채널	SF	앗
기본 높이	22픽셀	22픽셀			19픽셀	20픽셀	19픽셀	19픽셀
키	F	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ	F	ㅇ
패딩	F	F	ㅇ	ㅇ	ㅇ	ㅇ	F	ㅇ
줄 높이	F	F	F	F	F	F	ㅇ	F
텍스트 세로 중앙 정렬	ㅇ	ㅇ	ㅇ	F	F	ㅇ	ㅇ	ㅇ

위의 연구 결과 속성 요약을 통해 IE6은 어떻게 설정하든 높이가 22px로 고정되어 있는 반면, Safari를 제외한 다른 브라우저는 높이 속성을 지원한다는 것을 알고 있으므로 height:22px로 설정했습니다. 이제 Safari 브라우저를 수정하고 Safari만이 line-height 속성을 지원한다는 것을 알았습니다. 따라서 line-height를 사용하여 높이를 22px로 수정하고 글꼴 크기가 다음과 같다는 전제 하에 line-height: 22px를 설정할 수 있습니다. 12px, 그리고 마지막으로 FF와 IE9의 텍스트는 중앙에 있지 않습니다. Set padding: 2px 0. FF와 IE9 모두 중앙에 있지만 각 브라우저의 선택 높이가 증가하지 않았으므로 약간의 의심이 있습니다. 여기 높이 설정에서 적은 수의 숫자를 채워도 전체 높이가 늘어나지 않는 경우가 있나요?
다음은 완전히 호환되는 코드 예시입니다.

코드 복사

코드는 다음과 같습니다.

<선택>
데모 질문 1
데모 질문 2