IE8下DIV巢狀出現外層自適應高度

2021-05-24 09:30:38 字數 1241 閱讀 5721

ie8下div巢狀出現外層自適應高度(四種解決方法)

當b1和b2都是float=left時候,a1層的高度不會被b1和b2的高度撐開。(這個現象只有ie8發生,其他版本ie以及ie8選擇相容模式後就沒有問題。)

解決方法:a1的display=table

=================================

不同的瀏覽器對css的解析可能存在出入,因此能在ie6和ie7正常顯示的css+div頁面在ie8和ff(即firefox)瀏覽器中未必正常,需要格外留意。以下**在ff和ie8下無法正常顯示出div塊的內容,僅有一條兩個畫素高度的紅線(其實是上、下邊框擠在一處的結果)——

css:

#main

div:

ie8和ff瀏覽環境下的效果:

這意味著,當我們把main作為div的父層,裡面巢狀若干子層的div時,父層的樣式將是被忽略的或者根本就是無效的,這將可能發生嚴重的問題。我們必須找出原因。原來,在ie8和ff環境下,乙個沒有任何內容的不定義高度的div是不會顯示的。以上**中,我們若給main定義乙個高度,或將

改為hello

,ie8和ff下將正常顯示我們預設的效果。

巢狀div之後情形又如何呢?裡層的div是否被ie8和ff視為實體html元素?現在我們就來試驗一下div巢狀效果:

css:

#main

#sub

div:

hello world !

hi god !

在ie8和ff下的效果如下圖所示:

顯然,id為main的父層div沒有被id為sub的裡層子div撐高,整體樣式出現嚴重的走樣效果。乙個簡便的處理方法是,在最後乙個子層div結束之後加上乙個高度為0畫素的div,且該div不允許兩邊有浮動物件:

hello world !

hi god !

ok?第二種解決方法是定義乙個css類:

.box:after

然後將父層div**中的改為。

以上兩種方法都將出現如下圖所示的效果:

第四種:其實很簡單,只需給外層div加個overflow:auto;即可。

開啟**

取消來自:

IE8下相容background size方法

background size length percentage cover contain ie9 firefox 4 opera chrome 以及 safari 5 支援 background size 屬性。css3 新增的 background size 是乙個很有用的屬性,用於定義背景...

IE8下div中2個button僅僅顯示乙個

ie8下div中2個button僅僅顯示乙個,例如以下 請選擇 請選擇 如圖,僅僅顯示 儲存 按鈕,不顯示 隱藏 按鈕。dom中顯示沒問題,但就是不顯示。實在沒辦法了,打算把 隱藏 的不使用button,直接用label,結果button能夠顯示了,如圖 終於 例如以下 請選擇 請選擇 就加了一行 ...

IE8下iframe中巢狀帆軟報表頁面顯示空白問題

前兩天專案組發現乙個問題,在ie8下使用標籤頁 iframe顯示多個頁面的時候,開啟其他頁面都正常,但是開啟使用帆軟報表軟體 finereport 開發的報表頁面就顯示空白,奇怪的的是看狀態列有載入相應頁面,而且改變一下iframe的視窗大小 例如按f11全屏 頁面就會立刻顯示出來,感覺就是頁面從服...