在Safari中重叠CSS flexbox项目 [英] Overlapping CSS flexbox items in Safari
本文介绍了在Safari中重叠CSS flexbox项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Safari似乎提供太多的宽度来弹出具有大量内容的项目
Safari (Mac OS X 10.10.5 Yosemite上为v8.0.8)在Chrome和Firefox中,flex项目显示良好。
Chrome:
CSS:
main {
display:flex;
border:3px solid silver;
}
main> div {
background-color:plum;
margin:10px;
}
HTML:
< main>
< div>
Doh !!!!!!!!!!!
< / div>
< div>
Lorem ipsum dolor sit amet,consectetur adipiscing
elit,sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua。 Ut enim ad minim veniam。
< / div>
< / main>
与代码混淆:
http://jsfiddle.net/LL05grus/6
解决方案 div>
这是一个奇怪的问题。
您可以通过如下方式修改第一个子对象来修复它:
main> div:first-child {
-webkit-flex:1 0 auto;
}
(grow = yes,shrink = no,basis:auto)
What's the correct CSS to force Safari to not overlap flex items within a default flex container?
Safari seems to give too much width to flex items with lots of content.
Safari: (v8.0.8 on Mac OS X 10.10.5 Yosemite)
The flex items display fine in Chrome and Firefox.
Chrome:
CSS:
main {
display: flex;
border: 3px solid silver;
}
main >div {
background-color: plum;
margin: 10px;
}
HTML:
<main>
<div>
Doh!!!!!!!!!!!
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam.
</div>
</main>
Fiddle with the code:
http://jsfiddle.net/LL05grus/6
解决方案
That is a weird issue. You can fix it by flexing the first child as follows:
main >div:first-child {
-webkit-flex:1 0 auto;
}
(grow = yes, shrink = no, basis: auto)
这篇关于在Safari中重叠CSS flexbox项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文