Firefox2动态渲染问题（在IE中很好，Safariand FF3） [英] Firefox2 problem with dynamic rendering (it's fine in IE, Safariand FF3)
问题描述
我遇到了Firefox 2的问题，如果我调整DIV的高度
（使用JavaScript），但下面的其余部分没有更新
反映受影响物品的新位置。如果我用b $ b（使用鼠标）稍微调整浏览器大小，那么FF2会以某种方式实现
东西不是'在正确的位置并正确地重新呈现页面。如果我
有一个JS函数（document.body.render（）;）可供我使用
，那么我可以解决这个问题，但我不知道'' T。或者我呢？
我假设有一个可以影响这种行为的CSS属性
不知何故。当然必须有，因为*这个简单的测试示例下面
工作得非常完美*。在复杂的页面上我试图实现
但是，它不起作用。复杂的页面中有几个CSS文件
，我无法从知识渊博的任何人那里获得任何信息
。我已经让下面的这个例子尽可能简约（删除了
标题，doctype以及我认为与示例无关的任何其他内容）。
唯一的区别（在原则）我在这里做什么（这是什么工作）和我在复杂的页面上做的事情（不起作用）是
大量的CSS。
在复杂的页面上，当你点击200时，然后div1。重叠
" div2"直到你稍微调整浏览器大小。当你点击
" 50"时，你会看到div2和div2。继续向下，直到你稍微调整
浏览器的大小。
< html>< head>
< ;脚本>
函数resizenow（x）{
document.getElementById（" div1_inner"）。style.height = x +" px";
}
< / script>
< / head>< body>
< form>
< input type = button value =" 50" onclick =" resizenow（50）"
< input type = button value =" 200" onclick =" resizenow（200）"
< / form>
< div id =" div1" style =" display：block; background-color：yellow;">
< div id =" div1_inner" style =" display：block; height：50px;">
< img width =" 100％"高度= QUOT; 100％QUOT; SRC ="" border =" 1">
< / div>
< / div>
< div id =" div2" ;>这里的东西< / div>
< / body>< / html>
10月3,5：07 * pm，Stevo< n ... @ mail.invalidwrote：
（...）
在复杂页面上，当您点击200时，则div1重叠
" div2"直到你稍微调整浏览器大小。当你点击
" 50"时，你会看到div2和div2。进一步向下悬挂，直到你稍微调整
浏览器的大小。
试试这个：
函数resizenow（x）{
var s =文件。 getElementById（" div1_inner"）。style;
s.height = x +" px";
s.display =" none" ;;
setTimeout（function（）{
s.display ="";
}，1）;
};
-
Jorge。
Jorge写道：
10月3日下午5:07，Stevo< n ... @ mail.invalidwrote：
>（.. 。）
在复杂的页面上，当你点击200时，然后div1。重叠
div2直到你稍微调整浏览器大小。当你点击
50时，你会看到div2。进一步向下悬挂，直到你稍微调整一下
浏览器的大小。
试试这个：
函数resizenow（x）{
var s =文件。 getElementById（" div1_inner"）。style;
s.height = x +" px";
s.display =" none" ;;
setTimeout（function（）{
s.display ="";
}，1）;
};
-
豪尔赫。
感谢Jorge，我会试一试。它可能产生一个不受欢迎的
闪烁，但如果它有效，它至少可能导致另一个潜在的b $ b b解决方案。也许我可以在div1和
div2之间添加另一个1像素的高DIV并切换那个显示属性。
Le 10 / 3/08 7:03 PM，Stevoaécrit：
>
感谢Jorge，我会试一试。它可能产生一个不受欢迎的
闪烁，但如果它有效，它至少可能导致另一个潜在的b $ b b解决方案。也许我可以在div1和
div2之间添加另一个1像素的高DIV，并切换一个人的显示属性。
另一个解决方案可能是：
函数resizenow（x）{
var d = document.getElementById（" div1_inner"）;
var c = d.cloneNode（true）;
c.style.height = x +" px" ;;
d.parentNode.replaceChild（c，d）;
}
未经测试。
I have a problem with Firefox 2 where if I resize the height of a DIV
(using JavaScript), but the rest of the page below isn''t being updated
to reflect the new positions that affected items should be in. If I
(using the mouse) resize the browser slightly, then somehow FF2 realizes
things aren''t in the right place and re-renders the page correctly. If I
were to have a JS function ( document.body.render(); ) available to me
for example, then I could manage this problem, but I don''t. Or do I ?
I''m assuming there''s a CSS property that can influence this behavior
somehow. Surely there must be, because *this simple test example below
is working just perfectly*. On the complex page I''m trying to implement
this on though, it doesn''t work. The complex page has several CSS files
in it and I can''t get any information from anyone knowledgeable about it
either. I''ve made this example below as minimalist as possible (removing
title, doctype and anything else I think is irrelevant to the example).
The only difference (in principle) between what I''m doing here (which
works) and what I''m doing on the complex page (which doesn''t work) is
tons of CSS.
On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.
<html><head>
<script>
function resizenow(x){
document.getElementById("div1_inner").style.height =x+"px";
}
</script>
</head><body>
<form>
<input type=button value="50" onclick="resizenow(50)">
<input type=button value="200" onclick="resizenow(200)">
</form>
<div id="div1" style="display:block;background-color:yellow;">
<div id="div1_inner" style="display:block;height:50px;">
<img width="100%" height="100%" src="" border="1">
</div>
</div>
<div id="div2">Something here</div>
</body></html>
On Oct 3, 5:07*pm, Stevo <n...@mail.invalidwrote:(...)
On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.try this:
function resizenow (x) {
var s= document.getElementById("div1_inner").style;
s.height= x+"px";
s.display= "none";
setTimeout(function () {
s.display= "";
},1);
};
--
Jorge.
Jorge wrote:On Oct 3, 5:07 pm, Stevo <n...@mail.invalidwrote:>(...)
On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.
try this:
function resizenow (x) {
var s= document.getElementById("div1_inner").style;
s.height= x+"px";
s.display= "none";
setTimeout(function () {
s.display= "";
},1);
};
--
Jorge.Thanks Jorge, I''ll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one''s display property.
Le 10/3/08 7:03 PM, Stevo a écrit :>
Thanks Jorge, I''ll give that a try. It might produce an undesirable
flicker, but if it works, it at least might lead to another potential
solution. Perhaps I can add another 1 pixel high DIV in between div1 and
div2 and toggle that one''s display property.
an other soluce could be :
function resizenow(x){
var d = document.getElementById("div1_inner");
var c = d.cloneNode(true);
c.style.height=x+"px";
d.parentNode.replaceChild(c,d);
}
Not tested.
这篇关于Firefox2动态渲染问题（在IE中很好，Safariand FF3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
