[問題] overflow 在不同瀏覽器行為不一

[cyclone350 (老子我最神)]

大家好

   最近處理一個 CSS 跑版問題很疑惑

就是如果 float 配上 overflow 時，不同瀏覽器行為會不一樣

例如這份程式

http://goo.gl/MsztHN


在 chrome 顯示是
http://i.imgur.com/rplLNL3.png


在 firefox 顯示是
http://i.imgur.com/5zBF3T5.png


明顯不一樣..

overflow 不是只是設定有沒有 scroll bar 嗎?

如果只是設定 scroll bar

應該會出現下面這種結果
http://i.imgur.com/CFGsly3.png



可是 chrome 與 fixfox 都不是這種結果

怎麼會有其他的行為出現?

是有甚麼是我沒注意到的?  還是這種寫法不符合正統作法?






另外一個問題

我發現如果我有設定 display: none ，那麼同一個元素設定的 clear 屬性就會無效...

是 display: none 會讓其他屬性無效嗎?

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.193.192.133
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1427015992.A.8DE.html
推 iamnodoubt: 有時候css並不是總是可以很有邏輯的解釋,有時單純就只
→ iamnodoubt: 是經驗還有trick,像position:absolute;top:0;bottom:0
→ iamnodoubt: 既然render出來不一樣,就用其他種方式去寫
→ cyclone350: i大你的例子在邏輯上就是矛盾的，我的overflow在邏輯
→ cyclone350: 上是矛盾的嗎? 我想可能有，但我看不出來。
推 GALINE: Overflow 會產生新的 block formatting context
→ GALINE: http://goo.gl/XtCR3z
→ GALINE: 大概兩個瀏覽器的新 bfc 跟 float 元素互動的方式不同...
推 GALINE: 另，box2掛clear:left以後就相同了。但應該不是你要的...
→ oj113068: overflow不是只有關於卷軸，他會修改box Mode...
推 iamnodoubt: BFC沒聽過,學習了,我剛那寫法是讓一個元素高度撐開跟
→ iamnodoubt: 母元素一樣,有時有些特別組合height=100%沒作用,那寫
→ iamnodoubt: 法卻有作用,行為也有點不一樣,不好解釋的都叫trick xd
→ cyclone350: 感謝G大，以前不知道BFC這東西。
→ cyclone350: 另外我的CSS知識是從 http://goo.gl/dKJjk1 來的
→ cyclone350: 對於 CSS 那網站會說明得太少嗎? 例如 BFC 就沒有提
推 iamnodoubt: 你要找細節就去找高手的blog或是大社群維護的
→ iamnodoubt: 像css-tricks或是mdn那種,工具只是達到目的的方式