Когда IE7 повторно вычисляет стили? Не работает надежно, когда класс добавляется к телу
У меня есть интересная проблема здесь. Я использую класс на элементе как переключатель для управления изрядным количеством поведения расположения на моем сайте.
Если класс применяется, определенные вещи происходят, и если класс не применяется, их не происходит. JavaScript используется, чтобы применить и удалить класс. Соответствующий CSS примерно похож на это:
.rightSide { display:none; }
.showCommentsRight .rightSide { display:block; width:50%; }
.showCommentsRight .leftSide { display:block; width:50%; }
И HTML:
<body class="showCommentsRight">
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
</body>
Я упростил вещи, но это - по существу метод. Целая страница изменяет расположение (скрывающий правую сторону в трех различных областях), когда флаг установлен на теле. Это работает в Firefox и IE8. Это не работает в IE8 в режиме эмуляции. То, что является захватывающим, - то, что, если Вы сидите там и обновляете страницу, результаты могут варьироваться. Это выберет правую сторону другого раздела для показа. Иногда это будет показывать только правую сторону главного раздела, иногда это будет показывать середину.
Я попробовал:
- блок проверки допустимости (для поиска уродливого HTML)
- проверенный дважды мое форматирование CSS, и...
- удостоверяясь мой лист взлома IE7 не имел эффекта.
- помещая класс флага на другой, элемент обертки нетела (все еще имеет то же нечетное поведение),
Таким образом, мой вопрос:
- Существует ли способ, которым это поведение может быть сделано надежным?
- Когда IE7 решает восстановить моделирование?
Спасибо все.
4 ответа
Звучит немного похоже на проблему, с которой я столкнулся в ie7, где DOM обновляется, но пиксели на экране не обновляются (иногда наведение мыши на них вызывает перерисовку). Я нашел грязный хак, который сработал в моем случае (spesudo-javascript):
//Just after changing the css class:
if(isIe7()){
addAnEmptyDivAboveTheChangedElement();
removeTheEmptyDivFromTheDom();
}
По какой-то причине этот грубый хак добавления и удаления элемента (он может даже сработать, если вы добавите и удалите его в любом месте) заставляет ie7 перерисовывать документ. Это может вызвать мерцание, но это дорогой хак, так как он заставляет полностью перерисовывать документ в уже медленном браузере, поэтому я делаю это только если уверен, что это ie7 (чтобы не тормозить все остальные браузеры только потому, что ie7 тупой).
Не могу обещать, что это сработает, хотя... Когда я пытался найти решение своей проблемы, я нашел множество различных хаков, которые не работали. Исправление несоответствий ie7 с javascript - это в основном метод проб и ошибок :)
PS:
Я вижу, что переключение display уже предложено, это может сработать, или, как в моем случае, не сработать. Мне пришлось фактически удалить элемент из дерева dom, чтобы заставить его работать...
Попробуйте это:
.showCommentsRight .rightSide { display:block !important; width:50%; }
.showCommentsRight .leftSide { display:block !important; width:50%; }
Здесь близко к решению, может быть, кто-то другой сможет довести его до конца.
Страница ведет себя должным образом, если:
- если стиль назначается тексту вручную вместо использования javascript.
(неприемлемое решение, но стоит отметить)
- Если элементы, которые IE7 не обновляет (.rightSide), вручную отбрасываются чем-то вроде $ (".rightSide"). hide (). show ();
Это второе решение чертовски близко к работоспособному, за исключением того, что я на самом деле ищу поведение show hide вне своего флага, поэтому я бы хотел изменить менее навязчивую вещь, которая заставит IE обновлять стили.
Похоже, вы столкнулись либо с проблемой перекомпоновки / перерисовки IE6 / IE7, либо с проблемой компоновки IE6 / IE7.
См. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ для подробного и информативного анализа того, что запускает перекомпоновку, перерисовку и т. Д. Также см. http: //www.satzansatz.de/cssd/onhavinglayout.html, чтобы узнать, что заставляет элемент в IE "иметь макет".
Вы можете активировать и «наличие макета», и перекомпоновку, установив height: 1%; . Это известно как Хакерство Холли , названное в честь Холли Бергевин, первого человека, который задокументировал его.