固定宽度选择框下拉向左侧扩展

Question

HTML

<div class="wrapper">
<select>
<option>Compressed and uncompressed copies of jQuery files are available</option>
<option>Compressed and uncompressed copies of jQuery</option>
<option>Compressed and uncompressed</option>
</select>
</div>

JS

function fixIeCombos() {

    //if ($.browser.msie && $.browser.version < 9) 
    //{ 
    $('select').wrap('<div class="selectDiv"></div>');
    $('.selectDiv').width($('select').outerWidth());
    $('select')
    .bind('focus mouseover', function() {            
        var originalWidth = $(this).width();    
        var $selectClone = $(this).clone();
        $selectClone.addClass('expand');
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width();
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
            $(this).addClass('expand').removeClass('clicked');
        $(this).parent().css({'border-left':'solid 1px #ccc'});
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {        
       if (!$(this).hasClass('clicked')) {
           $(this).removeClass('expand');
       $(this).parent().css({'border-left':'solid 0px #ccc'})
        }        
    })
    .bind('change', function () {
        $(this).removeClass('expand');
    $(this).parent().css({'border-left':'solid 0px #ccc'});
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    $(this).parent().css({'border-left':'solid 0px #ccc'});
    })
   // }
}

CSS

.wrapper {
    width:500px;
    margin:0 auto;
}

/* For Select Box*/
select{
    width:200px;
    border:solid 1px #ccc;
}
select.expand { 
    width: auto; 
}
.selectDiv {
    overflow:hidden;    
}
.selectDiv select {
    float:right;
}

选择在IE中截断的选项。所以我使用上面的脚本来避免截断。所以它的工作方式在IE8中向左扩展，但在IE7中没有，因为选项向右扩展，float:right属性不适用于IE7中的选择框。

我的问题是，IE7中的选项也向左扩展。

请在IE8和IE7浏览器中查看jsfiddle。