2015-09-21 5 views
-3

есть ошибка в IE 11, когда я пустой html в DIV, и я удаляю класс в списке с JavaScript. DIV теряет syle CSS «Overflow: auto» и guard - отличная высота Нет ошибки в другом навигаторе.ошибка IE 11 с переполнением auto

Пример:

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

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

Спасибо, Жан-Пьер

+0

просто WTF последняя строка? спасибо, кто? и как он связан с этим ужасным вопросом | – knitevision

+1

@knitevision, его зовут Жан-Пьер. Пожалуйста, обратите внимание на свой язык, это не сайт социальной сети. –

ответ

0

изменение одной из петель переменной i к j, потому что вы же переменную в обоих петель

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

     // do you logic 
    }  
} 
+0

привет, петли не каскадированы –

+0

@Jp Riton: вы пытались изменить имя переменной? –

+0

С моей стороны ошибка, есть цикл, но это не исправляет проблему. –

0

Я удалил двойной цикл, проблема была не в этом. В Internet Explorer вы должны нажать кнопку «Выбрать все», а затем кнопку «Очистить все и отменить выбор», чтобы воспроизвести проблему.

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

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

Спасибо, Жан-Пьер

0

переполнением: Автоматическая проблема/ошибка в IE

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

DEMO

Смежные вопросы