代码之家 › 专栏 › 技术社区 › SimplGy

IE7何时重新计算样式?当类被添加到主体中时,不能可靠地工作

internet-explorer-7 internet-explorer css javascript

8

SimplGy · 技术社区 · 16 年前

我这里有个有趣的问题。我使用元素上的类作为开关来驱动我的站点上的大量布局行为。

如果类被应用,某些事情就会发生,如果类没有被应用,它们就不会发生。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>

-验证程序(用于查找格式错误的html)

-确保我的IE7黑客名单没有影响。
-将flag类放在不同的非主体包装器元素上(仍然具有相同的奇怪行为)

-有没有办法让这种行为变得可靠?

谢谢大家。

5 回复 | 直到 16 年前

1

2

Stein G. Strindhaug 16 年前

听起来有点像我在ie7中遇到的问题,DOM被更新了,但屏幕上的像素没有(有时鼠标悬停在上面会触发重画)。我发现一个肮脏的黑客在我的情况下工作(spesudo javascript):

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

出于某种原因,这种添加和删除元素的野蛮黑客行为(如果在任何地方添加和删除元素,甚至可能奏效)导致ie7重新绘制文档。它可能会导致闪烁,虽然这是一个昂贵的黑客,因为它强制在一个已经很慢的浏览器完全重新绘制,这就是为什么我只有这样做,如果我确定它是ie7(不慢其他浏览器仅仅因为ie7是愚蠢的)。

但我不能保证它会成功。。。当我试图找到解决问题的方法时,我发现很多不同的方法都不管用。用javascript修复ie7的不一致性几乎是一个反复试验的过程

: display 如果allready建议,它可能会起作用,或者在我的情况下,它不会起作用。实际上我不得不这么做去除 dom树中的元素使其工作。。

2

0

Shuriken 16 年前

试试这个:

.showCommentsRight .rightSide { display:block !important; width:50%; }
.showCommentsRight .leftSide { display:block !important; width:50%; }

3

0

SimplGy 16 年前

接近一个解决方案,也许其他人可以带来最后一点的方式。

在以下情况下,页面的行为与预期一致:
-如果样式是手动指定给主体的,而不是使用javascript。

-如果IE7没有更新的元素(the.rightSide)被手动踢到$(“.rightSide”).hide().show()之类的位置;

第二个解决方案几乎是可行的,除了我实际上是在寻找显示隐藏行为我的旗帜,所以我想一个不太侵入性的东西来改变,这将使IE刷新的风格。

4

0

Christopher Parker 16 年前

看起来您遇到了IE6/IE7回流/重绘问题或IE6/IE7布局问题。

看到了吗 http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ http://www.satzansatz.de/cssd/onhavinglayout.html 找出是什么导致IE中的元素“具有布局”。

您可以通过设置 height: 1%; Holly hack ,以第一个记录它的人霍莉·伯格文的名字命名。

5

0

Mike Flynn 14 年前

这是我的两分钱。expando对象出现了一个问题,因此下面的代码对我来说是一个settimeout延迟。我的问题是,当我插入一些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);
        }
    };