带有溢出自动的错误 IE 11答案

【问题标题】：bug IE 11 with overflow auto带有溢出自动的错误 IE 11
【发布时间】：2015-09-22 14:41:00
【问题描述】：

当我清空 DIV 中的 html 并使用 JavaScriptS 删除列表中的类时，IE 11 上存在错误。 DIV 失去了样式 CSS "Overflow:auto" 并且守卫是一个很好的高度另一个导航器上没有错误。

示例：

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>  
<style>
div {
	margin: 5px;
}
ul {
	margin: 5px;
	max-height: 200px;
	overflow: auto;
}
ul li.selected {
	font-weight: bold;
}
.dest {
	width: 500px;
	min-height: 21px;
	max-height: 120px;
	overflow: auto;
	border: 1px solid #ccc;
	background-color: #f9f9f0;
	padding: 3px;
}
.dest span {
	display: block;
    background-color: #fff;
	float: left;
	border-radius: 2px;  
	border: 1px solid #ccc;
	margin: 2px;
	padding: 0px 2px 0px 2px;
	line-height: 21px;
	height: auto;
}
</style>
<script>
	window.onload = function(){		
		document.getElementById("btclear").onclick = function(){
			document.getElementById("dest").innerHTML = "";
		};
		document.getElementById("btclearplus").onclick = function(){
			document.getElementById("dest").innerHTML = "";
			var ul = document.getElementById("list");
			var lis = ul.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = "";
			}
		};
		document.getElementById("btall").onclick = function(){
			for(var i = 0; i < 50; i++) {
				var span = document.createElement("span");
				span.innerHTML = "first name " + i + " last name " + i;				
				document.getElementById("dest").appendChild(span);
			}
			var ul = document.getElementById("list");
			var lis = ul.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = "selected";
			}
		};
		for(var i = 0; i < 50; i++) {
			for(var i = 0; i < 50; i++) {
				var li = document.createElement("li");
				li.innerHTML = "nom" + i + " prenom" + i;						
				document.getElementById("list").appendChild(li);
			}		
		}
	}
</script>
</head>
<body>

	<div id="dest" class="dest"></div>
	<div>
		<ul id="list"></ul>		
	</div>
	<div>
		<button id="btall">Select all</button>
		<button id="btclear">Clear all</button>
		<button id="btclearplus">Clear all and deselect</button>
	</div>	
</body>
</html>

谢谢你，让-皮埃尔

【问题讨论】：

只是 wtf 是最后一行？谢谢谁？他和这个可怕的问题有什么关系|
@knitevision，他的名字是让-皮埃尔。请注意您的语言，这不是任何社交网站。

标签： javascript html css

【解决方案1】：

将循环变量i 之一更改为j，因为两个循环中都有相同的变量

for(var i = 0; i < 50; i++) {
    for(var j = 0; j < 50; j++) {

         // do you logic
    }       
}

【讨论】：

你好，循环没有级联
@Jp Riton：你试过改变变量名吗？
这是我的错误，有一个循环但不能解决问题。

【解决方案2】：

我删除了双循环，问题不在于这里。在 Internet Explorer 中，您必须单击“全选”按钮，然后单击“全部清除并取消选择”按钮才能重现问题。

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>  
<style>
div {
	margin: 5px;
}
ul {
	margin: 5px;
	max-height: 200px;
	overflow: auto;
}
ul li.selected {
	font-weight: bold;
}
.dest {
	width: 500px;
	min-height: 21px;
	max-height: 120px;
	overflow: auto;
	border: 1px solid #ccc;
	background-color: #f9f9f0;
	padding: 3px;
}
.dest span {
	display: block;
    background-color: #fff;
	float: left;
	border-radius: 2px;  
	border: 1px solid #ccc;
	margin: 2px;
	padding: 0px 2px 0px 2px;
	line-height: 21px;
	height: auto;
}
</style>
<script>
	window.onload = function(){		
		document.getElementById("btclear").onclick = function(){
			document.getElementById("dest").innerHTML = "";
		};
		document.getElementById("btclearplus").onclick = function(){
			document.getElementById("dest").innerHTML = "";
			var ul = document.getElementById("list");
			var lis = ul.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = "";
			}
		};
		document.getElementById("btall").onclick = function(){
			for(var i = 0; i < 50; i++) {
				var span = document.createElement("span");
				span.innerHTML = "first name " + i + " last name " + i;				
				document.getElementById("dest").appendChild(span);
			}
			var ul = document.getElementById("list");
			var lis = ul.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = "selected";
			}
		};
		for(var i = 0; i < 50; i++) {
			var li = document.createElement("li");
			li.innerHTML = "nom" + i + " prenom" + i;						
			document.getElementById("list").appendChild(li);
		}		
	}
</script>
</head>
<body>

	<div id="dest" class="dest"></div>
	<div>
		<ul id="list"></ul>		
	</div>
	<div>
		<button id="btall">Select all</button>
		<button id="btclear">Clear all</button>
		<button id="btclearplus">Clear all and deselect</button>
	</div>	
</body>
</html>

谢谢你，让-皮埃尔

【讨论】：

【解决方案3】：

溢出：IE 中的自动问题/错误

.element { overflow-y: auto; overflow-x: visible; width: 450px; }

DEMO

【讨论】：