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

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

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

第一反应是是浏览器兼容性问题。找到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获取的属性在不同浏览器里的数值。

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

this.popupLayer.height(584);

 

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

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

 

本文没有什么技术含量，供大家参考参考！