html - IOS safari flex布局bug?
PHP中文网
PHP中文网 2017-04-18 09:50:33
0
1
702

IOS safari下使用flex布局的时候,如果使用display:flex,例如

html, body { height: 100%; padding: 0; margin: 0; } .wrapper { display: flex; height: 100%; flex-direction: column; } .header { height: 50px; line-height: 50px; border-bottom: solid 1px #ccc; flex: 0; } .body { flex: 1; }

头部

身体

如果改变了header高度,safari会出现滚动条,就像没有重新进行弹性计算一样。

但使用-webkit-box这种老式的标准并没有出现问题,在桌面各个现代浏览器均没有这种情况发生。

这是个bug吗?还是说我遗漏了什么?

测试环境:ios10

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua (1)
巴扎黑

在Safari试了下,缩写形式都不会重新计算布局(console中尝试element.style.flex='xxx', 不会生效),不要用缩写的形式

flex: 1;
改成
flex-grow: 1; 就行了

    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!