瀏覽器高度計算不同導致的顯示問題

朋友給我發了個檔案包，讓我看看裡面的彈出遮罩層在IE下顯示是正常的，但在Firefox等瀏覽器下彈出一下之後就消失了。

效果如，一個遮罩的效果，在Firefox裡白色的遮罩DIV很快又消失。

第一反應是是瀏覽器安全色性問題。找到DIV樣式裡有filter以為是這個問題，找了一下在非IE下用opacity來解決，可是在其代碼裡已經有了opacity的定義。看來應該不是這個問題。立馬解決是不太可能了。那就用FireBug一步一步調試吧。還好工具強大，很快就發現問題了。遮罩層在移動的時候樣式中的定義屬性left與top快速變化，並且top最終的值是負的。看來這是導致問題的原因。JS代碼如下：

<div class="cnblogs_code"><div><span style="color: rgb(0, 0, 0);">                    </span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">.popupLayer.css({opacity:</span><span style="color: rgb(0, 0, 0);">0.1</span><span style="color: rgb(0, 0, 0);">}).show(</span><span style="color: rgb(0, 0, 0);">400</span><span style="color: rgb(0, 0, 0);">,</span><span style="color: rgb(0, 0, 255);">function</span><span style="color: rgb(0, 0, 0);">(){<br>                        </span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">.popupLayer.animate({<br>                            left:($(document).width() </span><span style="color: rgb(0, 0, 0);">-</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">.popupLayer.width())</span><span style="color: rgb(0, 0, 0);">/</span><span style="color: rgb(0, 0, 0);">2,</span><span style="color: rgb(0, 0, 0);"><br></span><span style="color: rgb(0, 0, 0);">                            </span><span style="color: rgb(0, 128, 0);">//</span><span style="color: rgb(0, 128, 0);">下面這一句導致的問題</span><span style="color: rgb(0, 128, 0);"><br></span><span style="color: rgb(0, 0, 0);">                            top:(document.documentElement.clientHeight </span><span style="color: rgb(0, 0, 0);">-</span><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">.popupLayer.height())</span><span style="color: rgb(0, 0, 0);">/</span><span style="color: rgb(0, 0, 0);">2 + $(document).scrollTop(),</span><span style="color: rgb(0, 0, 0);"><br></span><span style="color: rgb(0, 0, 0);">                            </span><span style="color: rgb(0, 128, 0);">//</span><span style="color: rgb(0, 128, 0);">top:(document.documentElement.clientHeight - 584)/2 + $(document).scrollTop(),</span><span style="color: rgb(0, 128, 0);"><br></span><span style="color: rgb(0, 0, 0);">                            opacity:</span><span style="color: rgb(0, 0, 0);">0.8</span><span style="color: rgb(0, 0, 0);"><br>                        },</span><span style="color: rgb(0, 0, 0);">1000</span><span style="color: rgb(0, 0, 0);">,</span><span style="color: rgb(0, 0, 255);">function</span><span style="color: rgb(0, 0, 0);">(){</span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">.popupLayer.css(</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">opacity</span><span style="color: rgb(0, 0, 0);">"</span><span style="color: rgb(0, 0, 0);">,</span><span style="color: rgb(0, 0, 0);">1</span><span style="color: rgb(0, 0, 0);">)}.binding(</span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">));<br>                    }.binding(</span><span style="color: rgb(0, 0, 255);">this</span><span style="color: rgb(0, 0, 0);">));</span></div></div>

使用Alert顯示各JS擷取的屬性在不同瀏覽器裡的數值。

先手動修改了個固定的高度。OK，顯示正常。看來找到問題的解決辦法之後，在JS執行的方法開頭先設定對像高度。這樣就在同的瀏覽器裡實現了相容。

this.popupLayer.height(584);

 

網上找的關於高度解析差異的說明

對高度的解析
IE：將根據內容的高度變化，包括未定義高度的圖片內容，即使定義了高度，當內容超過高度時，將使用實際高度
Firefox：沒有定義高度時，如果內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會造成和實際內容高度不符合的情況；當定義了高度，但是內容超過高度時，內容會超出定義的高度，但是地區使用的樣式不會變化，造成樣式錯位。
結論：大家在可以確定內容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現混亂！

 

本文沒有什麼技術含量，供大家參考參考！