IE 드롭다운 목록 너비 수정

Internet Explorer에서 드롭다운 목록은 드롭박스의 너비를 반영하지만 Firefox에서는 다음에 맞게 조정됩니다. 내용. 이러한 제약으로 인해 가장 긴 선택 항목을 수용하기 위해 보관용 계정을 확장해야 하므로 미학적으로 보기에 좋지 않은 웹 페이지가 됩니다.

다양한 너비에 대한 CSS 기반 솔루션

이 문제를 극복하려면 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'); });
}

이 스크립트를 다음 CSS와 결합합니다.

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

필요한 드롭다운 요소에 "와이드" 클래스를 추가하면 이러한 수정 사항을 적용할 수 있습니다. 예:

    ...

이 jsfiddle에서 라이브 데모를 살펴보세요: [링크]