Fatal编程技术网
  • javascript/
  • Javascript IE7何时重新计算样式？不'；当类被添加到主体中时，它不能可靠地工作

Javascript IE7何时重新计算样式？不'；当类被添加到主体中时，它不能可靠地工作

javascript css internet-explorer

Javascript IE7何时重新计算样式？不'；当类被添加到主体中时，它不能可靠地工作,javascript,css,internet-explorer,internet-explorer-7,Javascript,Css,Internet Explorer,Internet Explorer 7,我这里有一个有趣的问题。我使用元素上的一个类作为开关，在我的站点上驱动大量的布局行为 如果类被应用，某些事情就会发生，如果类没有被应用，它们就不会发生。Javascript用于应用和删除该类。相关CSS大致如下所示： .rightSide { display:none; } .showCommentsRight .rightSide { display:block; width:50%; } .showCommentsRight .leftSide { display:block; width:

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

如果类被应用，某些事情就会发生，如果类没有被应用，它们就不会发生。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黑名单没有影响。
-将flag类放在不同的非主体包装器元素上（仍然具有相同的奇怪行为）

所以我的问题是：
-有没有办法使这种行为可靠？
-IE7何时决定重新进行造型

谢谢大家。

试试这个：

.showCommentsRight .rightSide { display:block !important; width:50%; }
.showCommentsRight .leftSide { display:block !important; width:50%; }
这里有一个解决方案，也许其他人可以在最后一刻带来

如果：
-如果手动而不是使用javascript将样式指定给正文。
（不是可接受的解决方案，但值得注意）
-如果IE7没有更新的元素（即.rightSide）被手动使用类似$（“.rightSide”）.hide（）.show（）的东西踢

第二个解决方案几乎是可行的，除了我实际上是在寻找我的标志之外的显示隐藏行为，所以我想改变一个不太干扰的东西，让IE刷新样式。

听起来有点像我在ie7中遇到的问题，DOM被更新了，但屏幕上的像素没有更新（有时将鼠标悬停在上面会触发重画）。我发现了一个在我的案例中有效的肮脏黑客（spesudo javascript）：

出于某种原因，这种添加和删除元素的野蛮攻击（如果您在任何地方添加和删除它，甚至可能会起作用）会导致ie7重新绘制文档。但它可能会导致闪烁，而且这是一种昂贵的攻击，因为它会在已经很慢的浏览器中强制进行完全重新绘制，这就是为什么我只有在确定它是ie7时才会这样做（不要因为ie7很蠢就让其他浏览器都慢下来）

不过，我不能保证它会起作用……当我试图找到问题的解决方案时，我发现许多不同的破解方法都不起作用。用javascript修复ie7的不一致性几乎是反复试验（woodoo.）

PS：
我看到切换
display
是allready建议的，它可能会起作用，或者在我的情况下，它不会起作用。我实际上必须从dom树中删除元素以使其起作用。

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

有关触发回流、重绘等的详细信息分析，请参阅。另请参阅以了解是什么导致IE中的元素“具有布局”

你可以触发两个“布局”通过设置
height:1%；
进行回流。这被称为，以第一个记录它的人Holly Bergevin的名字命名。

这是我的两分钱。expando对象出现了问题，因此下面的设置延迟了我的工作。我的问题是，当我插入一些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);
        }
    };
IE不理解
！重要的
。IE7和更高版本应该理解它。因为这里的问题与IE7有关，所以值得一试。不起作用。我很高兴，因为我不想在代码中留下任何重要的内容。正如我在编辑中所说的，如果手动提前将类应用于包装元素，这一切都会很好她比JS好——所以继承性很好。为什么不
.showcomentsright.rightSide，.showcomentsright.leftSide{display:block！重要；宽度：50%；}
相反？Eli，我是缺少一个微妙之处，还是你只是在谈论对选择器进行分组？该规则没有达到预期效果，因此对其进行不同的分组也没有帮助。尽管我同意，如果这样做有效，你的方法会更简单。这听起来很有趣。没有办法将其放到一个实时网站上有没有考虑过为IE7安装开发者工具栏来仔细检查哪里出了问题？我已经安装了开发者工具栏，它告诉我。右侧元素仍然有显示：没有应用，即使在该元素显示的时候。那里的不精确性虽然不是一个大的意外，但我已经发现了d工具栏通常与动态代码不同步。抱歉，无法将其放在实时网站上。我发现这篇可能相关的帖子：这篇帖子就在按钮上。我最终使用了：if（$.browser.class==“msie7”）{{{u$thingToRefresh.addClass（“kickIE”）.removeClass（“kickIE”）}如果有一种资源密集度较低的方法，我会使用它，但我什么也没找到。

    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);
        }
    };