Internet Explorer에서 드롭다운 목록 너비 불일치를 처리하는 방법은 무엇입니까?

IE에서 드롭다운 목록 너비를 조정하는 방법

Internet Explorer에서 드롭다운 목록은 연결된 드롭박스의 너비를 상속합니다. 그러나 Firefox와 같은 다른 브라우저에서는 목록 너비가 콘텐츠에 맞게 조정되어 모양이 일관되지 않습니다. 가장 긴 항목을 수용하기 위해 보관용 계정 너비를 확장하면 페이지에 공백이 너무 많아질 수 있습니다.

이 문제를 해결하려면 jQuery와 CSS를 활용하여 해결 방법을 찾을 수 있습니다. 아래 jQuery 코드는 포커스, 마우스오버, 마우스아웃, 클릭, 흐림 등 드롭다운 목록의 너비를 전환하는 다양한 이벤트를 처리합니다.

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

이 jQuery 코드를 다음 CSS로 보완하세요.

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

이 CSS는 보관용 계정의 고정 너비를 설정하므로 150픽셀 등 원하는 너비를 지정할 수 있습니다. 드롭다운 목록이 확장되면 "확장" 클래스가 적용되어 콘텐츠에 따라 자동 계산된 너비로 고정 너비를 재정의합니다.

이 솔루션을 사용하려면 관련 클래스에 "와이드" 클래스를 추가하기만 하면 됩니다. 드롭다운 요소:

<select class="wide">
    ...
</select>

이 접근 방식은 브라우저 전체에서 균일한 너비를 보장하는 동시에 필요에 따라 드롭다운 목록을 확장 및 축소하여 IE 관련 너비 상속 문제를 해결합니다.

위 내용은 Internet Explorer에서 드롭다운 목록 너비 불일치를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!