IE 6/7에서의 Select 옵션 잘림 현상

IE 6/7에서 Select 요소의 Option 목록이 지정된 너비(Width)보다 클 때 잘리는 현상이 나타납니다.

Firefox 에서는 옵션의 내용만큼 자동으로 커집니다

Chris Coyier는 CSS Tricks에 올린 글 Select Cuts Off Options In IE (Fix)을 통해서 jQuery를 이용한 방법을 개선책으로 제시하고 있습니다.

$(function() {

    $(".ProductAttributesSelect")

        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
        })

        .mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));
        });

});

.ProductAttributesSelect 는 Select 요소에 지정된 클래스 이름이며, 마우스 오버시 본래의 너비(Width)를 기억 시킨 후 'auto'값으로 변경합니다. 마우스가 아웃 되면 기억된 너비 값을 다시 CSS의 width 속성에 대입시켜서 복귀 시키도록 합니다.

특별히 IE 6/7에서만 작동하도록 작성하면 조금 더 나은 코드가 될 것입니다.

이렇게 작성된 스크립트는 사용자가 셀렉트 박스 위에 마우스를 위치 시켰을 때 옵션의 내용만큼 자동으로 길어지게 됩니다. 반대로 마우스가 벗어나면 원래의 크기를 갖습니다.

간단하게 적용시킬 수 있는 방법이며, jQuery가 아닌 다른 자바스크립트 프레임워크를 사용해도 됩니다. 또는 표준 스크립트 문법만을 가지고도 작성할 수 있습니다.

다음은 다른 방법으로 해결된 경우입니다.


• Fix Drop down <select /> with fixed width cutt-off bugs on IE
• Select Box I.E. Width Problem
• Viewing Option Text (in IE7) that's Wider than the Select List