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