水平 jquery 可排序列表，当滚动可见时，IE11 中的占位符宽度不正确答案

【问题标题】：Horizontal jquery sortable list, placeholder width is incorrect in IE11 when scroll is visible水平 jquery 可排序列表，当滚动可见时，IE11 中的占位符宽度不正确
【发布时间】：2015-02-23 15:08:10
【问题描述】：

我有一个水平列表，我正在尝试使用可排序的 jqueryui 对其进行排序。

只要所有项目都适合窗口，它就可以完美地工作。但是当我有很多项目时，滚动条出现占位符宽度很小。或者实际上，当我在 IE 开发人员工具中检查占位符时，宽度设置为正确的值，但它仍然显示为一条细线。

我注意到在占位符样式中添加填充可以使其更宽，但为什么我不能使用宽度？我真正想要的是占位符获得项目的宽度，而无需在占位符类中指定它，它在不需要滚动条时执行。

所以我的问题是为什么占位符在 IE 中没有以正确的宽度显示（它似乎在 Chrome 中工作）？我能做些什么来解决它？

编辑：我注意到 min-width 的工作可能与 inline-flex 在 IE 中的工作方式有关吗？

提前致谢！

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

.container {
	width: 500px;
}

.listContainer {
	overflow-x: auto;
}

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

.item {
	padding: 2px;
}

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

.lm-placeholder {
	border: 3px dashed #bdbdbd;
	width: 100px;
	background-color: #078cd9;
	/*padding-left: 20px;
	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">
		<div class="listContainer">
			<ul id="list" class="list">
				<li class="item"><div class="card">1</div></li>
				<li class="item"><div class="card">2</div></li>
				<li class="item"><div class="card">3</div></li>
				<li class="item"><div class="card">4</div></li>
				<li class="item"><div class="card">5</div></li>
				<li class="item"><div class="card">6</div></li>
				<li class="item"><div class="card">7</div></li>
			</ul>
		</div>
	</div>
</body>

【问题讨论】：

标签： internet-explorer jquery-ui-sortable

【解决方案1】：

这对我有用

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

【讨论】：

【解决方案2】：

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

【讨论】：

这样的代码不是一个足够的答案！