利用定位解決乙個HTML頁面奇怪的布局相容性問題

2021-06-16 01:25:38 字數 674 閱讀 1017

前兩天碰到個問題,乙個頁面中有個,指定了固定的高寬尺寸值,同時通過overflow樣式指定內容過多時自動出現滾動條。為了準確定位,此被至於多個**巢狀的單元格中。頁面顯示的時候出現了一些奇怪的bug:

測試使用過ie6、ie7、傲遊等。根據在不同瀏覽器中的測試,此bug在有些瀏覽器中時隱時現,在有些瀏覽器中一直存在

正常現象:

單元格尺寸正常,尺寸、位置正常,根據其內容的多少會相應出現滾動條。

bug現象:

當中內容進一步增多時,自身尺寸未發生變化,但包含上述的單元格實際尺寸被無故撐大,單元格實際高度比指定值要大,頁面布局被打亂。

經測試修改多處樣式沒有改善,加上doctype宣告也不行,懷疑可能是ie瀏覽器的bug。

後來想到乙個辦法:

給加上樣式「position: absolute;」,讓其使用絕對定位;同時給它的上級元素加上樣式「position: relative;」,以作為的絕對定位參照物;各元素座標及尺寸均不變。問題解決!

後來想到,這個問題怪異的很,而且在有的瀏覽器中不會出現問題,會不會是因為頁面上**巢狀太多的原因?或是有其它未發現的**筆誤?由於其它原因,沒必要推翻整個頁面重做了,所以不管那麼多了,此處僅討論此問題的一種解決方案而已。

使用VScode寫乙個html頁面

首先外掛程式配備好了,寫乙個html測試一下 首nibqpdqf先創程式設計客棧建乙個資料夾,建立乙個html 資料夾 或者jquery資料夾 下面接著可以在目錄下新建檔案寫乙個html 我測試取名 text2 名字任意,自己取 注意 寫的是html 則程式設計客棧你寫的格式的結尾就是 text2....

前端頁面,利用js開啟乙個websocket

websocket的目標是在乙個單獨的持久鏈結上提供全雙工 雙向通訊。在js建立websocket之後,會有乙個http傳送到瀏覽器以發起鏈結,在取得伺服器響應後,建立的連線會使用http公升級從http協議交換為websocket協議,也就是說,使用標準的http協議無法實現websockts,只...

HTML 做乙個HTML的個人簡介頁面

效果我的hexo部落格是看的大神教程一步步做的,然後所以我的about介面,也準備仿著大佬的做,之前根本沒學過web的前端,只接觸過xaml這種帶標籤的設計語言 確定好每個區域的位置,背景色和透明度,顏色我不會弄成漸變的,暫且純色代替,css我也沒學過,寫法如果錯誤請見諒 center center...