Question

当我在DIV中清空html时，IE 11上有一个错误，我使用JavaScriptS删除列表中的类。 DIV失去了syle CSS＆＃34; Overflow：auto＆＃34;和后卫是一个很高的高度另一个导航器没有错误。

样品：

＆＃13;

<!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>

＆＃13;

谢谢Jean-Pierre

Answer 1

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

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

         // do you logic
    }       
}

Answer 2

我删除了双循环，问题不在这里。在Internet Explorer中，您必须单击＆＃34;全选＆＃34;按钮，然后是按钮＆＃34;全部清除并取消选择＆＃34;重现问题。

＆＃13;

<!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>

＆＃13;

谢谢Jean-Pierre

Answer 3

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

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

DEMO

错误IE 11溢出自动

3 个答案: