CSS表示：jqueryカルーセル内のIE中心の要素の整列

Question

要素の数がラッパーを満たしていない場合、カルーセル内の要素が中央揃えになる問題が発生しました。カルーセルがスクロールしない場合は、display:inlineをJQueryを使用してラッパーに追加することで、この問題を解決できました。しかし、これはIE（バージョン11）で壊れ、要素のどれも全く表示されません。変わったことは、私がALTキーを選択すると、それらが表示されることです！

誰でもこの動作を説明し、これをどのように修正できるかを提案できますか？このJSFIddleを見てください。

http://jsfiddle.net/bharatsing/ysuf1u1p/3/

.bxslider-inner { 
    display: inline-block; 
    float:none !important; 
    margin: 0 auto; 
} 

.bx-wrapper { 
    max-width: 460px!important; 
    text-align:center; 
} 

<ul class="bxslider"> 
    <li class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;">1</div></li> 
<li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">2</div></li> 
    <li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">3</div></li> 

</ul> 
<script> 
jQuery(document).ready(function(){ 
    jQuery('.bxslider').bxSlider({ 
    mode: 'horizontal', 
    speed: 500, 
    slideMargin:10, 
    infiniteLoop: false, 
    pager: false, 
    controls: true, 
    slideWidth: 80, 
    minSlides: 1, 
    maxSlides: 5, 
    moveSlides: 1  }); 
    }); 

$(".bxslider").each(function(){ 
var nextDisabled = $(this).parents(".bx-wrapper:eq(0)").find(".bx-next").hasClass('disabled'); 
var prevDisabled = $(this).parents(".bx-wrapper:eq(0)").find(".bx-prev").hasClass('disabled'); 
    if(nextDisabled && prevDisabled) 
    { 
    $(this).css("display","inline"); 
    } 
}); 
</script> 

Answer 1

あなたの問題は、実際に一度のために正しいことをやっている、すなわちので、あなたがインライン要素に幅を与えることができないということです。

これは、width:515%が尊重されていないことを意味します。変換が変換されると、ulが画面外に移動します。

ではなく、表示をインラインでこれを試してみてください：

$(this).css({ 
     "display":"inline-block", 
     "width":"auto", 
     "transform": "none" 
    }); 

Updated fiddle