Select를위한 최고의 사전 설정은 각 브라우저마다 Select와 완전히 호환됩니다.

각 브라우저에서 선택 태그의 특성과 각 브라우저의 지원이 다르므로 각 브라우저에서 선택 선택 상자가 다르게 표시됩니다. 아래에서는 주요 외관 CSS 속성의 지원을 통해 완전히 호환 가능한 선택을 만듭니다.

변수를 제어하여 각 브라우저에서 세 가지 상황을 테스트하기 위해 변수를 작성하는 방법을 사용했습니다 : height.100.padding.0, height.no.padding.100, no.height.no.padding. 결과는 다음과 같습니다. 링크 사진, 각 브라우저의 데모 모양 .

우리는 다음 연구 속성을 도출 할 수 있습니다.

위에서 언급 한 연구 결과 속성에 대한 요약을 통해 IE6은 언제든지 22px로 고정되어 설정되지 않도록 설정되었으며 Safari를 제외한 다른 브라우저는 높이 속성을 지원하므로 높이 : 22px를 설정합니다. 이제 Safari 브라우저를 수정하겠습니다. Safari만이 라인 높이 속성을 지원하므로 라인 높이를 사용하여 높이를 22px로 바로 잡을 수 있습니다. 글꼴 크기가 12px 인 경우 라인 높이 : 22px가 설정됩니다. 결국, FF와 IE9의 텍스트는 중앙에 있지 않으며 패딩 : 2px 0이 설정됩니다. 우리는 FF와 IE9가 중앙에 있음을 발견했지만 각 브라우저의 선택의 높이는 증가하지 않았습니다. 따라서 높이 설정에서 적은 수의 숫자를 패딩하면 전체 높이가 증가하지 않습니까?

아래는 완전히 호환 가능한 코드 예입니다.

코드를 복사하십시오