水平jQuery的可排序列表，IE11中的佔位符寬度不正確當滾動可見時

我有一個水平列表，我嘗試使用jqueryui sortable進行排序。水平jQuery的可排序列表，IE11中的佔位符寬度不正確當滾動可見時

只要所有項目都適合窗口，它就能完美地工作。但是，當我有很多項目，以便滾動條出現佔位符寬度是很小的。或者實際上，當我在IE開發人員工具中檢查佔位符時，寬度設置爲正確的值，但仍然顯示爲細線。 enter image description here

我注意到，添加填充佔位符的風格，可以讓更廣泛的，但爲什麼我不能用寬度是多少？我真正想要的是讓佔位符獲取項目的寬度，而不需要在佔位符類中指定它，這是在不需要滾動條時執行的。

所以我的問題是爲什麼不在IE中顯示寬度正確的佔位符（它似乎在Chrome中工作）？我能做些什麼來解決它？

編輯：我注意到，最小寬度的作品可以與內聯flex如何在IE中工作？

提前致謝！

$("#list").sortable({ 
 
\t \t items: "> li", 
 
\t \t opacity: 0.8, 
 
\t \t placeholder: "lm-placeholder", 
 
\t \t tolerance: "pointer", 
 
\t \t helper: "original", 
 
\t \t revert: true, 
 
\t \t axis: "x", 
 
\t \t start: function (event, ui) { 
 
\t \t \t var index = ($(ui.item).index()); 
 
\t \t } 
 
\t });

.container { 
 
\t width: 500px; 
 
} 
 

 
.listContainer { 
 
\t overflow-x: auto; 
 
} 
 

 
.list { 
 
\t list-style-type: none; 
 
\t display: inline-flex; 
 
\t background-color: antiquewhite; 
 
} 
 

 
.item { 
 
\t padding: 2px; 
 
} 
 

 
.card { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: white; 
 
\t border: 1px solid #666666; 
 
} 
 

 
.lm-placeholder { 
 
\t border: 3px dashed #bdbdbd; 
 
\t width: 100px; 
 
\t background-color: #078cd9; 
 
\t /*padding-left: 20px; 
 
\t padding-right: 20px;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 

 
<body> 
 
<div id="content" class="container"> 
 
\t \t <div class="listContainer"> 
 
\t \t \t <ul id="list" class="list"> 
 
\t \t \t \t <li class="item"><div class="card">1</div></li> 
 
\t \t \t \t <li class="item"><div class="card">2</div></li> 
 
\t \t \t \t <li class="item"><div class="card">3</div></li> 
 
\t \t \t \t <li class="item"><div class="card">4</div></li> 
 
\t \t \t \t <li class="item"><div class="card">5</div></li> 
 
\t \t \t \t <li class="item"><div class="card">6</div></li> 
 
\t \t \t \t <li class="item"><div class="card">7</div></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</body>

來源

2015-02-23 Sofi

這對我的作品

.placeholder { 
    display: inline-block; 
    width: 30px; 
    height: 20px; 
    border: 1px solid yellow; 
    background-color: orange; 
}

來源

2015-12-04 09:36:21 Kani

水平jQuery的可排序列表，IE11中的佔位符寬度不正確當滾動可見時

回答

相關問題