Question

如果元素的数量没有填充包装，我在旋转木马中的元素是居中对齐的。如果carousel不滚动，我设法通过使用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

你的问题是你不能给内联元素赋予宽度，所以即使实际做了一次正确的事情。

这意味着width:515%不受尊重，因此当转换转换发生时，ul会移出屏幕。

尝试使用此内容代替显示内联：

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

Updated fiddle

CSS - 显示：IE上的内联中断 - jquery轮播中的中心对齐元素

1 个答案: