Jquery 固定宽度选择框下拉列表向左侧展开

Html

选择IE中截断的选项。所以我使用了上面的脚本来避免截断。因此，它的工作原理类似于IE8中的选项向左展开，而IE7中的选项不向左展开，因为选项向右展开，并且IE7中的选择框不适用于

float:right

属性

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

---

请在IE8和IE7浏览器中对此进行检查。

您想做什么？我希望IE7和IE8的选项都向左展开。

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

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'});
    })
   // }
}

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