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

2021-09-07 21:34:00 字數 1101 閱讀 3253

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

效果如下圖,乙個遮罩的效果,在firefox裡白色的遮罩div很快又消失。

第一反應是是瀏覽器相容性問題。找到div樣式裡有filter以為是這個問題,找了一下在非ie下用opacity來解決,可是在其**裡已經有了opacity的定義。看來應該不是這個問題。立馬解決是不太可能了。那就用firebug一步一步除錯吧。還好工具強大,很快就發現問題了。遮罩層在移動的時候樣式中的定義屬性left與top快速變化,並且top最終的值是負的。看來這是導致問題的原因。js**如下:

this

.popuplayer.css().show(

400,

function

(),1000

,function

().binding(

this

));}.binding(

this

));

使用alert顯示各js獲取的屬性在不同瀏覽器裡的數值。

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

this.popuplayer.height(584);

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

對高度的解析

ie:將根據內容的高度變化,包括未定義高度的內容,即使定義了高度,當內容超過高度時,將使用實際高度

firefox:沒有定義高度時,如果內容中包括了內容,mf的高度解析是根據印刷標準,這樣就會造成和實際內容高度不符合的情況;當定義了高度,但是內容超過高度時,內容會超出定義的高度,但是區域使用的樣式不會變化,造成樣式錯位。

結論:大家在可以確定內容高度的情況下最好定義高度,如果真的沒有辦法定義高度,最好不用使用邊框樣式,否則樣式肯定會出現混亂!

網頁高度計算及瀏覽器適配的理解

網頁上有 meta name viewport 標籤,它的寬度表示螢幕能顯示的css px 寬度,使用document.documentelement.clientwidth可以獲取 通常將它設定成device width可以使1px的css能在各個手機上展示的一樣,dev width 部分手機可以...

不同瀏覽器時間控制項顯示上的區別

功能需求 輸入時間,該時間大於小孩出生時間 對應欄位childbirthdate 小於當前時間 頁面 input type date id completiondate name completiondate max datetime.utcnow.utctojst tostring yyyy mm...

解決瀏覽器縮放導致頁面顯示不全問題

問題 pc端web頁面開發時,發現windows系統經常推薦使用者使用125 150 比例的縮放視窗,這樣導致web頁面被進行縮放,除此之外還有人為的按鈕縮放。故此,在頁面devicepixelratio 裝置畫素比例 變化後,通過計算頁面body標籤zoom修改其大小,來抵消devicepixel...