jQuery를 사용하여 Internet Explorer와 Firefox 간의 드롭다운 목록 너비 차이를 해결하는 방법은 무엇입니까?

IE 드롭다운 목록 너비 불일치

Internet Explorer에서는 드롭다운 목록이 드롭박스의 너비를 상속하지만 Firefox에서는 목록에 맞춰 조정됩니다. 콘텐츠. 가장 긴 옵션을 수용하기 위해 보관용 계정의 크기를 불필요하게 크게 설정해야 하므로 문제가 될 수 있습니다.

CSS 솔루션

불행히도 보관용 상자와 드롭다운 목록에 서로 다른 너비를 설정하는 것은 좋지 않습니다. CSS만 사용해도 가능합니다.

jQuery 해결 방법

jQuery를 사용하는 해결 방법으로 원하는 효과를 얻을 수 있습니다. 이 솔루션은 다양한 이벤트(focus, mouseover, click, mouseout, Blur)를 캡처하고 드롭다운 목록의 CSS 클래스를 동적으로 수정합니다.

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;
}

드롭다운 목록에 "와이드" 클래스를 할당하면 이에 따라 너비가 조정되어 IE 불일치가 해결됩니다.

위 내용은 jQuery를 사용하여 Internet Explorer와 Firefox 간의 드롭다운 목록 너비 차이를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!