2

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を確認してください。

4

0 に答える 0