學習div float 在ff和ie下的布局區別

2021-04-22 19:08:45 字數 1169 閱讀 5298

以上**顯示的結果如下,很正常,結果相同。

下面會在這個基礎上進行修改,修改的內容都在style中,其他**就不再重複寫了。

請注意,這裡的style中用到了min-height,這個和height是不同的,min-height指定了物件的乙個最小高度,當物件的子內容高度超過這個最小高度是,這個物件會自動撐大。這是乙個非常牛的style,可惜的是,在這個style和float這個同樣牛的style一起使用的時候,就會出現各種問題。

.d1
.d2
.d3
顯示結果如下。

這個結果中,firefox有點離譜了,兩個框疊在一起也就罷了,為什麼那個紅框會變大捏?而且變的大小也很詭異,不知道是按照什麼公式計算出來的。ie在這裡的顯示應當是附和標準的。

.d1
.d2
.d3
顯示結果如下。

這和前面第一種加float:left的情況相同。

再重申一次,本文討論的是乙個比較高階的話題。如果在style中用height而不是min-height來設定高度,是不會出現以上這些問題的。不過,不用min-height就失去了div自動撐大這乙個很有必要的特性。

在min-height和float:left的情況下,沒有一種完美的寫法讓firefox和ie結果相同。不過仍然可以發現繞開的方法。

進一步試驗可以發現,margin遭到的影響在padding上比較好,所以最好是padding和margin都不用,或者只用padding。

兩者相同的**如下,

div
.d1
.d2
.d3
顯示結果如下,

呵呵,總算是一樣了,雖然是湊合著一樣了。幸好一樣了,否則只好用table了。

當然所有這些情況也許是有合理解釋的,說不定增加某乙個style的設定,這些問題都迎刃而解了,不過目前我還沒有找到這個設定。

以上**在下面這些doctype下試驗過,結果相同。

js在IE和FF下的不同

1.document.formname.item itemname 問題 說明 ie下,可以使用document.formname.item itemname 或document.formname.elements elementname firefox下,只能使用document.formname...

offsetHeight在FF和IE6中的差異?

先看看簡單的 這是一行高度 div body html 1.在火狐3裡面,的到的是16px,解釋下,div裡面套著文字,實際中這樣考慮,產生乙個匿名盒子裡面放置文字 這是一行高度 由於行高為14px 那麼這個匿名盒子高度為14px 所以最終的 offsetheight 14px 1px 2 邊框 1...

js在IE和ff之間的差異(相容)

1.在建立xmlhttprequest物件時存在相容 2.事件物件event的建立和屬性存在差異 ie中,event事件作為window物件的乙個屬性 而ff則作為引數傳遞給函式。同時ie阻止冒泡 阻止預設行為 事件源物件分別為 e.cancelbubble true returnvalue fal...