關於DIV多層巢狀的margin top的BUG

2021-09-08 18:47:06 字數 586 閱讀 1732

今天在做登入頁面的時候發現個margin-top的bug ;

初始**如下:

html:

css:

.errorstyle
結果發現ie6.ie7正常,ie8,ff顯示錯誤。

癥結:當兩個容器巢狀時,如果外層容器和內層容器之間沒有別的元素,firefox會把內層元素的margin-top作用于父元素。

解決方案:

1、使用浮動來解決,即將子層**改為:

.errorstyle
2、使用padding-top來解決(因為ff盒模型問題,不推薦使用)

ok,一切都好了~

其實這個是乙個外邊距疊加的問題,恰恰firefox跟ie8中是正確的,而ie6、7之中是錯誤的,內部容器的margin與外部疊加,疊加的margin處於容器外部。浮動元素不會產生外邊距的疊加,所以間接解決了你遇到的問題。可

參照文章

關於firefox不相容DIV巢狀的問題

ff裡,要在外層的div裡放float left和float right的div,需要設定外層div的高度。你可以試一下 div1 div2 在ie裡正常,在ff裡,不會有紅色背景,也就是外層div沒有被撐開。div1 div2 這樣就正常了。最好外層和裡層的div都定義高度和寬度。這樣不太容易出現...

Newtonsoft提取多層巢狀的JSON

在.net 2.0中提取這樣的json 引用命名空間 using newtonsoft.json using newtonsoft.json.linq 可以把上面的json看成乙個物件.你只要寫對應的類即可 public class userinfo public string name publi...

python的多層巢狀列表處理

isinstance 函式來判斷乙個物件是否是乙個已知的型別 語法 以下是 isinstance 方法的語法 isinstance object,classinfo 引數 object 例項物件。classinfo 可以是直接或間接類名 基本型別或者由它們組成的元組。返回值 如果物件的型別與引數二的...