Когда IE7 пересчитывает стили? Не работает надежно, когда класс добавлен в тело - PullRequest
Новая
       17

Когда IE7 пересчитывает стили? Не работает надежно, когда класс добавлен в тело

8 голосов
/ 17 марта 2010

У меня есть интересная проблема здесь. Я использую класс для элемента в качестве переключателя для управления большим количеством макетов на моем сайте.

Если класс применяется, определенные вещи случаются, а если класс не применяется, они не случаются. 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 решает сделать стайлинг заново?

Спасибо всем.

Ответы [ 5 ]

2 голосов
/ 18 марта 2010

Звучит немного как проблема, с которой я столкнулся в ie7, когда DOM обновляется, а пиксели на экране - нет (иногда при наведении на него курсора мыши происходит перерисовка). Я нашел грязный хак, который работал в моем случае (spesudo-javascript): 

//Just after changing the css class:
if(isIe7()){
    addAnEmptyDivAboveTheChangedElement();
    removeTheEmptyDivFromTheDom();
}

По какой-то причине этот жестокий взлом добавления и удаления элемента (он может даже сработать, если вы добавите и удалите его где-либо) заставляет ie7 перерисовать документ. Это может вызвать мерцание, и это дорогостоящий хак, поскольку он вызывает полную перерисовку в и без того медленном браузере, поэтому я делаю это только в том случае, если я уверен, что это ie7 (не замедлять работу любого другого браузера только потому, что ie7 глупо).

Не могу обещать, что это сработает, хотя ... Когда я пытался найти решение своей проблемы, я обнаружил множество разных хаков, которые не работали. Исправление несоответствий в ie7 с помощью javascript - это в значительной степени метод проб и ошибок. :)

PS : Я вижу, что переключение display уже предложено, оно может сработать или, как в моем случае, не сработало. Мне нужно было на самом деле удалить элемент из дерева dom, чтобы он заработал ..

0 голосов
/ 09 ноября 2011

Вот мои два цента. Возникла проблема с объектом расширения, поэтому следующее сработало для меня с задержкой установки. Моя проблема заключалась в том, что при вставке HTML-кода фоновое изображение не появлялось. 

    app.viewModel.modules.updateSpeech = function (element) {
        if ($('html').hasClass('IE7')) {
            var cssClass = $(element).attr('class') || element['class'];
            if (cssClass)
                setTimeout(function() { $(element).removeClass(cssClass).addClass(cssClass); }, 0);
        }
    };
0 голосов
/ 19 марта 2010

Похоже, что вы сталкиваетесь либо с проблемой перекомпоновки / перекраски IE6 / IE7, либо с проблемой макета IE6 / IE7.

См. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ для подробного и информативного анализа того, что вызывает перерисовку, перерисовку и т. Д. Также см. http://www.satzansatz.de/cssd/onhavinglayout.html, чтобы узнать, что заставляет элемент в IE "иметь макет". *

Вы можете запустить как «имеющий макет», так и перекомпоновку, установив height: 1%;. Это известно как Холли хак , названный в честь первого человека, который задокументирует это, Холли Берджевин.

0 голосов
/ 17 марта 2010

Близко к решению здесь, может быть, кто-то еще может принести его в последнюю очередь.

Страница ведет себя как ожидалось, если:
- Если стиль назначен на тело вручную вместо использования JavaScript.
(не приемлемое решение, но стоит отметить)
- Если элементы, которые IE7 не обновляет (.rightSide), вручную удаляются с помощью чего-то вроде $ (". RightSide"). Hide (). Show ();

Это второе решение чертовски близко к работоспособности, за исключением того, что я на самом деле ищу поведение show hide вне своего флага, поэтому я бы хотел изменить менее навязчивую вещь, которая заставит IE обновить стили.

0 голосов
/ 17 марта 2010

Попробуйте это: 

.showCommentsRight .rightSide { display:block !important; width:50%; }
.showCommentsRight .leftSide { display:block !important; width:50%; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...