浏览器高度计算不同导致的显示问题

朋友给我发了个文件包,让我看看里面的弹出遮罩层在IE下显示是正常的,但在Firefox等浏览器下弹出一下之后就消失了。

效果如下图,一个遮罩的效果,在Firefox里白色的遮罩DIV很快又消失。

7PJKG}G6UJILTL5NJG1`3QO

第一反应是是浏览器兼容性问题。找到DIV样式里有filter以为是这个问题,找了一下在非IE下用opacity来解决,可是在其代码里已经有了opacity的定义。看来应该不是这个问题。立马解决是不太可能了。那就用FireBug一步一步调试吧。还好工具强大,很快就发现问题了。遮罩层在移动的时候样式中的定义属性left与top快速变化,并且top最终的值是负的。看来这是导致问题的原因。JS代码如下:

 
                    this.popupLayer.css({opacity:0.1}).show(400,function(){
                        
this.popupLayer.animate({
                            left:($(document).width() 
- this.popupLayer.width())/2,
                            //下面这一句导致的问题
                            top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
                            //top:(document.documentElement.clientHeight - 584)/2 + $(document).scrollTop(),
                            opacity:0.8
                        },
1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
                    }.binding(
this));

使用Alert显示各JS获取的属性在不同浏览器里的数值。

image

先手动修改了个固定的高度。OK,显示正常。看来找到问题的解决办法之后,在JS执行的方法开头先设置对像高度。这样就在同的浏览器里实现了兼容。

this.popupLayer.height(584);

 

网上找的关于高度解析差异的说明

对高度的解析
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!

 

本文没有什么技术含量,供大家参考参考!

posted on 2011-05-13 16:04  Gary Zhang  阅读(2237)  评论(0编辑  收藏  举报

导航