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

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