IE 7 / Причудливый режим и Цвет фона?

Question

Это будет неопределенный и неясный вопрос, который, вероятно, связан с тем, что даже при использовании IE Web Developer я понятия не имею, что происходит.

У меня есть утилита, над которой я работаю. В основном это JavaScript, и он имеет небольшой плавающий пользовательский интерфейс DIV, который отображается на странице. Пока что стандартные вещи. Проблема заключается в цвете фона некоторых DIV в пользовательском интерфейсе. Цвета назначаются с помощью CSS, и (усталый рефрен :) выглядит хорошо в Firefox, Chrome и Opera, но, конечно, IE затруднен.

Фон не отображается в IE в режиме причуд или IE7, но в режиме IE8. Насколько я понимаю, я не могу понять, почему IE7 не показывает фон.

Страница, на которой вы видите код обидчика, находится здесь: Log Hound Demo . Плавающий DIV находится в верхнем правом углу - нажмите «V», чтобы открыть его.

Глядя на эту страницу в IE, а затем в [любом другом браузере на планете] достаточно легко покажет вам недостающие цвета фона. Клянусь, даже Lynx делает это лучше ... хм. Идентификаторы DIV-нарушителей: lhPlateHead, lhPlateCtrlPanel, lhPlateTagPanel - их легко найти, по крайней мере, в Firebug. Они должны учитывать класс .lhPlateColor с цветом фона # DFEAF8, но этот цвет никогда не применяется.

После запуска веб-разработчика IE я попытался удалить классы CSS и снова добавить их. Я попробовал каждую комбинацию режима браузера и документа - опять же, только режим браузера IE8 в режиме документа IE8 работал с фоновыми цветами.

Если кому-то скучно смотреть и что-то выяснять, я был бы очень признателен.

Answer 1

Что ж, я наконец-то понял это, и, насколько я понимаю, это еще одна причина, по которой IE всегда будет отстой.

Обстоятельства проблемы:

1. Вы создаете элемент программно:
   myelmt = document.createElement('DIV')
2. Вы устанавливаете стили этого элемента программно:
   myelmt.setAttribute('class', 'myclass');
3. Затем вы добавляете этот элемент программно в DOM:
   body.appendChild(myelmt);
4. Вы используете IE.
5. IE ненавидит тебя.

В таких случаях IE8 будет соблюдать css "myclass" и правильно стилизовать элемент при его добавлении в DOM. IE7, и я думаю, что ниже приведёт к потере стиля CSS и заставит вас думать, что работа в McDonald's, вероятно, намного менее стрессовая.

Подведем итог для нетерпеливых:

Работает в IE8 и КАЖДОМ ДРУГОМ БРАУЗЕРЕ НА ПЛАНЕТЕ

var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);

Работает в IE7 и ниже:

var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);

Если кто-то может точно объяснить, почему это проблема для IE7, не стесняйтесь, пока я наслаждаюсь подробностями. В противном случае, просто помните, что это все весело и игры, пока кто-то не потеряет ссылку на объект.

Answer 2

Попробуйте добавить zoom:1 к любому элементу, с которым не работает цвет фона.

Answer 3

Я считаю, что проблема связана с тем, как IE рисует ячейки таблицы. Попробуйте добавить в правило только CSS для IE, которое явно применяет цвет фона к TD. Как это:

.lhWarnMsg .logMsg td
{
 * background-color: #fbffbf;
}

Надеюсь, это сработает для вас.