堆栈内存溢出
  简体   繁体   English

IE7何时重新计算样式？ 将类添加到正文时，无法可靠地工作

[英]When does IE7 recompute styles? Doesn't work reliably when a class is added to the body

 原文  2010-03-16 22:19:05  3   5    javascript/ css/ internet-explorer/ internet-explorer-7

问题描述

I have an interesting problem here. 我这里有一个有趣的问题。 I'm using a class on the element as a switch to drive a fair amount of layout behavior on my site. 我将元素上的类用作开关，以在我的网站上推动大量布局行为。

If the class is applied, certain things happen, and if the class isn't applied, they don't happen. 如果应用了该类，则某些事情会发生，如果不应用该类，则它们不会发生。 Javascript is used to apply and remove the class. Javascript用于应用和删除类。 The relevant CSS is roughly like this: 相关的CSS大致如下： 

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

And the HTML: 和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>

I've simplified things but this is essentially the method. 我已经简化了事情，但这实际上是方法。 The whole page changes layout (hiding the right side in three different areas) when the flag is set on the body. 当在主体上设置标志时，整个页面都会更改布局（在三个不同区域中隐藏在右侧）。 This works in Firefox and IE8. 这适用于Firefox和IE8。 It does not work in IE8 in compatibility mode. 在兼容模式下，它在IE8中不起作用。 What is fascinating is that if you sit there and refresh the page, the results can vary. 令人着迷的是，如果您坐在那里刷新页面，结果可能会有所不同。 It will pick a different section's right side to show. 它将选择其他部分的右侧进行显示。 Sometimes it will show only the top section's right side, sometimes it will show the middle. 有时只显示顶部的右侧，有时只显示中间。

I have tried: 我试过了：
- a validator (to look for malformed html) -验证器（查找格式错误的html）
- double checked my css formatting, and... -仔细检查了我的CSS格式，然后...
- making sure my IE7 hack sheet wasn't having an effect. -确保我的IE7 hack表没有效果。
- putting the flag class on a different, non-body wrapper element (still has the same odd behavior) -将flag类放在另一个非body包装器元素上（仍然具有相同的奇怪行为）

So my question is: 所以我的问题是：
- Is there a way that this behavior can be made reliable? -是否有办法使这种行为可靠？
- When does IE7 decide to re-do styling? -IE7何时决定重新进行样式设置？

Thanks everyone. 感谢大家。

5 个解决方案

解决方案1
 2 已采纳  2010-03-18 08:35:48

Sounds a bit like a problem I've had with ie7, where the DOM is updated but the pixels on screen is not (sometimes hovering the mouse over it triggers redraw). 听起来有点像ie7的问题，其中DOM已更新，但屏幕上的像素没有更新（有时将鼠标悬停在其上会触发重绘）。 I found a dirty hack that worked in my case (spesudo-javascript): 我发现在我的情况下有效的肮脏的hack（spesudo-javascript）： 

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

For some reason this brutal hack of adding and removing an element (it might even work if you add and remove it anywhere) causes ie7 to repaint the document. 由于某种原因，这种添加和删除元素的野蛮技巧（即使在任何地方添加和删除元素，它也可能起作用），导致ie7重新绘制文档。 It may cause a flicker though and it's an expensive hack since it forces a full repaint in an already slow browser, that's why i only does so if I'm sure it's ie7 (to not slow every other browser just because ie7 is stupid). 它可能会导致闪烁，但这是一个昂贵的黑客，因为它会在已经很慢的浏览器中强制进行完全重绘，这就是为什么我只有在确定它为ie7的情况下才这样做（不要因为ie7是愚蠢的而让其他所有浏览器都减速）。

Can't promise it will work, though... When I tried to find a solution to my problem I found lots of different hacks that didn't work. 但是，我不能保证它会起作用。当我试图找到解决问题的方法时，我发现许多无法使用的黑客方法。 Fixing ie7's inconsistencies with javascript is pretty much trial and error woodoo. 修复ie7与javascript的不一致之处几乎是反复试验。 :) :)

PS : I see toggling display is allready suggested, it might work, or as in my case, it did not. PS ：我已经建议切换display ，它可能会起作用，或者就我而言，它没有起作用。 I had to actually remove the element from the dom tree to make it work.. 我实际上必须从dom树中删除该元素才能使其工作。

解决方案2
 0  2010-03-16 22:27:16

Try this: 尝试这个： 

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

解决方案3
 0  2010-03-17 14:13:31

Close to a solution here, maybe someone else can bring it the last bit of the way. 在这里接近解决方案时，也许其他人可以将其带到最后。

The page behaves as expected if: 在以下情况下，页面的行为符合预期：
- If the style is assigned to the body by hand instead of using javascript. -如果样式是手动分配给主体的，而不是使用javascript。
(not an acceptable solution, but worth noting) （不是可接受的解决方案，但值得注意）
- If the elements that IE7 isn't updating (the .rightSide's) are manually pants-kicked with something like $(".rightSide").hide().show(); -如果IE7不会更新的元素（.rightSide的元素）被手工踢成$（“。rightSide”）。hide（）。show（）;之类的东西。

That second solution is darn close to workable, except that I actually am looking for show hide behavior out of my flag, so I'd want a less intrusive thing to change that will make IE refresh the styles. 第二种解决方案几乎是可行的，除了我实际上是在寻找自己标志之外的显示隐藏行为，因此我希望更改一个不太麻烦的东西，以使IE刷新样式。

解决方案4
 0  2010-03-18 21:35:59

It seems like you're running into either an IE6/IE7 reflow/repaint issue or IE6/IE7 layout issue. 似乎您遇到了IE6 / IE7重排/重绘问题或IE6 / IE7布局问题。

See http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ for a detailed and informative analysis of what triggers reflow, repaint, etc. Also see http://www.satzansatz.de/cssd/onhavinglayout.html to find out what causes an element in IE to "have layout". 请参阅http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ ，以获取有关触发回流，重绘等原因的详细信息，并进行分析。另请参见http://www.satzansatz.de/cssd/onhavinglayout。 html找出导致IE中的元素“具有布局”的原因。

You could trigger both "having layout" and a reflow by setting height: 1%; 您可以通过设置height: 1%;来触发“具有布局”和重排height: 1%; . 。 This is known as the Holly hack , named after the first person to document it, Holly Bergevin. 这就是所谓的Holly hack ，以记录它的第一个人Holly Bergevin的名字命名。

解决方案5
 0  2011-11-09 17:48:41

Here is my two cents. 这是我的两分钱。 An issue with expando object was happening, so the following worked for me with a settimout delay. expando对象发生了问题，因此以下内容对我起作用，但出现了settimout延迟。 My issue was the background image wasn't appearing when I inserted some HTML. 我的问题是插入一些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);
        }
    };

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在浏览器ie6，ie7，ie8中使用style.filter时不起作用 - When using style.filter in browser ie6,ie7,ie8 doesn't work 从setTimeout调用时，函数无法正常工作，如在IE7和IE8中一样 - Function doesn't work as it should in IE7 & IE8 when invoked from a setTimeout 动态添加到IE中的DOM时，Flash对象不起作用 - Flash object doesn't work when dynamically added to the DOM in IE 为什么IE7和IE8却说它没有“ hasLayout”？ - Why is IE7 & IE8 says that it 'hasLayout', when it doesn't? 强制IE重新计算样式？ - Force IE to recompute styles? 当我在IE7中放大页面时，样式不起作用？ - When I enlarge the page in IE7,the style does not work? IE7附加但不加载<script> when injected - IE7 appends but doesn't load <script> when injected 为什么这些链接在IE7中不起作用？ - Why doesn't these links work in IE7? $（&#39;html&#39;）。append（）在IE7上不起作用 - $('html').append() doesn't work on IE7 Javascript检查在IE7中不起作用 - Javascript Checking doesn't Work in IE7
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM