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

本文介绍了水平jquery可排序列表，可见滚动时，IE11中的占位符宽度不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个水平列表，我正在尝试使用jqueryui sortable进行排序.

I have a horizontal list which I am trying to sort using jqueryui sortable.

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

As long as all items fits the window it works perfectly. But when I have many items, so that the scrollbar appear the placeholder width is to small. Or actually when I inspect the placeholder in IE developer tools the width is set to the correct value but it is still displayed as just a thin line.

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

I have noticed that adding padding to the placeholder style can make it wider, but why can't I use the width? What I really want is for the placeholder to get the width of the item without needing to specifying it in the placeholder class, which it does when the scrollbar is not needed.

所以我的问题是，为什么在IE中显示的占位符没有正确的宽度(在Chrome中似乎有效)?而我该如何解决呢?

So my question is why isn't the placeholder shown with the correct width in IE (It seems to work in Chrome)? And what can I do to fix it?

我注意到最小宽度有效与IE中inline-flex的有效方式有关吗?

I noticed that min-width works can it have to do with how inline-flex works in 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>

可见滚动时

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

问题描述

推荐答案