jquery - CSS - 显示 :inline breaks on IE - center aligning elements within jquery carousel

Question

如果元素的数量没有填满包装器，我就无法让轮播中的元素居中对齐。如果轮播不滚动，我设法通过使用 JQuery 将 display:inline 添加到包装器来实现这一点。然而，这在 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

你的问题是你不能给内联元素一个宽度，所以 ie 实际上只做了一次正确的事情。

这意味着 width:515% 没有得到遵守，所以当转换发生时，ul 被移出屏幕。

试试这个而不是内联显示:

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

Updated fiddle