作者cyclone350 (老子我最神)
看板Web_Design
標題[問題] overflow 在不同瀏覽器行為不一
時間Sun Mar 22 17:19:49 2015
大家好
最近處理一個 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://webptt.com/m.aspx?n=bbs/Web_Design/M.1427015992.A.8DE.html
1F：推 iamnodoubt: 有時候css並不是總是可以很有邏輯的解釋,有時單純就只 03/22 17:44
2F：→ iamnodoubt: 是經驗還有trick,像position:absolute;top:0;bottom:0 03/22 17:45
3F：→ iamnodoubt: 既然render出來不一樣,就用其他種方式去寫 03/22 17:47
4F：→ cyclone350: i大你的例子在邏輯上就是矛盾的，我的overflow在邏輯 03/22 18:15
5F：→ cyclone350: 上是矛盾的嗎? 我想可能有，但我看不出來。 03/22 18:16
6F：推 GALINE: Overflow 會產生新的 block formatting context 03/22 18:35
8F：→ GALINE: 大概兩個瀏覽器的新 bfc 跟 float 元素互動的方式不同... 03/22 18:37
9F：推 GALINE: 另，box2掛clear:left以後就相同了。但應該不是你要的... 03/22 18:39
10F：→ oj113068: overflow不是只有關於卷軸，他會修改box Mode... 03/22 21:10
11F：推 iamnodoubt: BFC沒聽過,學習了,我剛那寫法是讓一個元素高度撐開跟 03/22 21:59
12F：→ iamnodoubt: 母元素一樣,有時有些特別組合height=100%沒作用,那寫 03/22 22:00
13F：→ iamnodoubt: 法卻有作用,行為也有點不一樣,不好解釋的都叫trick xd 03/22 22:00
14F：→ cyclone350: 感謝G大，以前不知道BFC這東西。 03/22 22:01
16F：→ cyclone350: 對於 CSS 那網站會說明得太少嗎? 例如 BFC 就沒有提 03/22 22:04
17F：推 iamnodoubt: 你要找細節就去找高手的blog或是大社群維護的 03/23 04:38
18F：→ iamnodoubt: 像css-tricks或是mdn那種,工具只是達到目的的方式 03/23 04:41