fox瀏覽器相容flexbox問題

2021-08-10 21:03:09 字數 716 閱讀 1856

背景:在項自測過程中發現的問題,ffox瀏覽器在展開左側資料樹時,會把右側資料區也拉伸開來,這是表象。

分析:1.計算一下右側資料區的clientheight高度,是正確的,左側元資料區域,會隨著子元件內部樹的拉伸越來越高,但clientheight到一定值就不變了,和右側相等。

2.經過自行計算發現,ffox在計算的時候,沒有算上層的工具欄height。初始的時候,左側右側clientheight相同,樹的展開,左側就忽略了工具欄的height,這太奇怪了。

3.針對奇怪的現象,需要最小化demo看下是什麼原因,因此上面這些都是廢話,看下面的內容。

問題描述:chrome滾動顯示正確,在紅色區域,在ffox環境,滾動條顯示的是整體區域的,如何解決該問題?

chrome效果:

解決辦法,經過大家的討論,給出四種有效辦法,各有優缺點:

1.  增加乙個具有高度的div撐開,佔位。

2.  使用絕對定位,讓左側脫離文件流,但需要右側增加margin-left屬性。

3.  上種辦法的優化,增加乙個固定寬度的div佔位,去除右側的margin-left值,如果需要隱藏左側,只要同時處理兩個div就可以,不需要右側變更。

4.  結合overflow:hidden和flex 1 0 0 處理,控制外層的顯示,形成bfc。如果內部需要顯示,可以內部設定overflow:visible。

各有優缺點,結合專案實際情況取捨。

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...