Safari 및 IE에서 목록 패딩 문제 선택: 해결 방법?

Safari 및 IE에서 선택 목록 패딩 문제

많은 개발자가 다음과 같은 브라우저를 사용할 때 선택 목록에서 패딩이 예상대로 작동하지 않는 문제에 직면했습니다. 사파리와 인터넷 익스플로러처럼. 이 문제의 원인은 W3 사양에 잘 정의되어 있지 않지만 Safari 및 Chrome을 지원하는 WebKit 브라우저의 알려진 제한 사항입니다.

해결책:

패딩 지원이 부족함에도 불구하고 대신 텍스트 들여쓰기를 활용하면 비슷한 효과를 얻을 수 있습니다. 이 방법에는 선택 상자에 적용된 패딩을 제거하고 너비에 동일한 양을 추가하는 작업이 포함됩니다. 또한 text-indent 속성을 동일한 값으로 설정합니다.

예:

다음 코드를 고려하세요.

<code class="html"><select id="sexID" name="user[sex]"
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"
></code>

이 예에서는 , 15px의 원래 패딩이 선택 상자 스타일에서 제거되었습니다. 대신 텍스트 들여쓰기를 수용하기 위해 너비가 15픽셀 증가하여 다양한 브라우저에서 시각적 효과가 일관되게 유지됩니다.

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