CSS не относится к динамично созданным элементам в IE 7?
Все еще поиск ответа.
Изменение или переприсвоение фильтру innerHTML успешно перерисовывает элемент, но повреждает мой сценарий, таким образом, это отсутствует.
Добавление дополнительных дочерних узлов, включая текстовые узлы, не вызывает перерисовку. Удаление добавленного узла не вызывает перерисовку.
Используя ie7.js семейство сценариев не работает.
В проекте я продолжаю работать, я динамично генерирую (с JavaScript) фильтры, которые похожи на это:
<div class="filter">
<a ... class="filter_delete_link">Delete</a>
<div class="filter_field">
...
</div>
<div class="filter_compare">
...
</div>
<div class="filter_constraint">
...
</div>
<div class="filter_logic">
...
</div>
</div>
И у меня есть CSS, который относится к каждому фильтру (например):
.filter a.filter_delete_link{
display:block;
height:16px;
background: url('../images/remove_16.gif') no-repeat;
padding-left:20px;
}
Однако это кажется в IE 7 (и вероятно 6 в этом отношении), эти стили не становятся относившимися новые фильтры.
Все работает отлично в Firefox/Chrome/IE8.
Используя инструменты разработчика IE8, набор к режиму IE7, браузер видит новые элементы, и видит CSS, но просто не применяет CSS.
Существует ли способ вынудить IE перезагрузить стили, или возможно существует ли лучший способ зафиксировать это?
JavaScript: (упрощенный)
var builder = {
...
createNewFilter: function() {
var newFilter = document.createElement('div');
var deleteLink = document.createElement('a');
deleteLink.href = '#';
deleteLink.setAttribute('class','filter_delete_link');
deleteLink.title = 'Delete Condition';
deleteLink.innerHTML = "Delete";
newFilter.appendChild(deleteLink);
var field = document.createElement('div');
field.setAttribute('class','filter_field');
var fieldSelect = this.getFieldSelectBox();
field.appendChild(fieldSelect);
newFilter.appendChild(field);
// more of the same...
deleteLink.onclick = function() {
builder.removeFilter(newFilter);
};
fieldSelect.onchange = function () {
builder.updateFilter(newFilter);
}
return newFilter;
},
addNewFilter: function() {
var nNewFilter = this.createNewFilter(this.numFilters++);
this.root.insertBefore(nNewFilter,this.nAddLink);
//other unrelated stuff...
//provided by Josh Stodola
//redraw(this.root);
return nNewFilter;
}
}
7 ответов
Проблема, которую я обнаружил, заключается в том, что IE 6/7 не регистрирует изменения имени класса с помощью elm.setAttribute ('class', 'x') пока пользовательский интерфейс не будет перерисован.
Решением является использование формы elm.className = 'x'
** Эта проблема также была заметна при переходе от причуд IE9 к стандартному режиму. Решение было таким же.
У вас отсутствует " в строке, которая гласит http://jsfiddle.net/nhvrA/ .
Я продолжу расследование.
Разве вам не нужна ширина, а также высота элемента? Я знаю, что display: block должен давать ширину: 100%, но IE не такой яркий. Что-нибудь изменится, если указать ширину?
Мне кажется, что вам нужно принудительно перерисовать пользовательский интерфейс для этого элемента. Есть несколько способов сделать это, но наиболее эффективным является следующий метод...
// elm is a reference to your element
var disp = elm.style.display;
elm.style.display = "none";
var redrawFix = elm.offsetHeight;
elm.style.display = disp;
Вот еще один метод я нашел на Ajaxian...
function redraw(elm) {
var n = document.createTextNode(' ');
elm.appendChild(n);
setTimeout(function(){ n.parentNode.removeChild(n) }, 0);
return elm;
}
Может быть, в конце некоторых элементов не хватает "?
<a ... class="filter_delete_link>Delete</a> missing "
<div class="filter_field> missing "
IE6 / 7 имеет много проблем / ошибок / неправильного поведения в отношении создания и добавления элементов в DOM с помощью createElement . Я настоятельно рекомендую переключиться на jQuery для этого, поскольку он выполняет всю работу кроссбраузерно и уже учел (почти) все специфические нарушения поведения IE6 / 7, так что вам не нужно чтобы получить удвоенный объем кода, чтобы заставить его работать во всех браузерах, о которых знает мир. Вот copy'n'paste'n'runnable SSCCE :
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#add').click(function() {
var newElement = $('<div class="filter"><a href="#" class="delete">delete</a></div>');
$('#container').append(newElement);
});
});
</script>
<style>
.filter { background: pink; }
.delete { background: yellow; }
</style>
</head>
<body>
<div id="container"></div>
<button id="add">add</button>
</body>
</html>
Обновление : согласно комментариям, jQuery абсолютно не подходит. Что ж, лучше всего вы можете попробовать установить атрибуты элемента только после , когда элемент был добавлен в DOM. Также старайтесь не клонировать узлы в IE6 / 7, это часто приводит к эпической неудаче. Скорее создайте новый узел с самого начала.
Основываясь на других комментариях и ответах в этом thread, я решил эту проблему с помощью библиотеки прототипов:
<div id"dynamically-added-block"> ... </div>
...
$("dynamically-added-block").up().show();
Просто возьмите родительский элемент и снова покажите его. Протестировано в IE8 с использованием как режима браузера: IE8, режима документа: IE8, так и режима браузера: IE7, режима документа: IE7. Не тестировал с режимом ужасных причуд.