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

我有一个问题，如果元素的数量没有填充包装器，我的传送带内的元素要居中对齐。如果传送带不滚动，我设法使用JQuery将display:inline添加到包装中。然而，这在IE（版本11）中断了，并且根本没有显示任何元素。奇怪的是，如果我选择了ALT键，它们会显示！CSS - 显示：IE上的内联中断 - jQuery中的中心对齐元素

任何人都可以解释这种行为，并建议我如何解决这个问题？请看这个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>

来源

2017-01-23 LeeTee

一切正常，在我结束？ –

什么版本的ie？ – Pete

真的吗？所以你可以在IE中看到两行框？我只在IE中看到1，应该有2. – LeeTee

你的问题是，你能不能给一个宽度内联元素这样即实际上做正确的事情一次。

这意味着width:515%不受尊重，所以当转换转换发生时，ul会从屏幕上移开。

试试这个，而不是内嵌式地显示：

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

Updated fiddle

来源

2017-01-23 10:59:52 Pete

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

回答

相关问题