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中的中心對齊元素

回答

相關問題