作者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/cn.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