我正在为一个网站开发一个基于Flexbox的静态主页,我似乎无法弄清楚如何在Chrome和Safari上使它看起来一样。
在Chrome上它呈现我的期望,但在Safari上,图像会拉伸和扭曲,并且无法正常工作。
我添加了供应商前缀,但这没有帮助。试管的主要图像似乎不符合我设定的“高度:100%”规则。
示例代码在这里
https://codepen.io/anon/pen/LRdrwV
<body>
<div id="flex-column">
<div class="nav">
<h2 class="menu">Menu</h2>
</div>
<div class="title">
<h1> Title </h1>
</div>
<div id="flex-box">
<img src="http://www.sibeliusnaturalproducts.com/wp-content/uploads/2016/08/sib-banner-v1-repeat.jpg">
<div class="blurb">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</div>
<div id="bg">
<img src="http://www.sibeliusnaturalproducts.com/wp-content/uploads/2016/08/sib-banner-v1-main.jpg">
</div>
</div>
</body>
和CSS
body,html {
height: 100%;
margin:0;
}
#flex-column {
display: flex;
flex-direction: column;
height:100%;
}
.menu, .title{
padding-left: 100px;
}
.nav{
flex: 0 1 auto;
background-color:red
}
.title{
flex: 0 1 auto;
background-color:#f2f378;
}
#flex-box{
flex: 0 1 auto;
display:flex;
height: 100%;
justify-content: center;
align-items: flex-end;
position:relative;
z-index: -2
}
#flex-box > .blurb{
flex:0 1 auto;
max-width:400px;
align-self: center;
box-sizing: border-box;
}
#flex-box > #bg {
flex:0 1 auto;
}
#flex-box > #bg,
#flex-box > img{
max-height:700px;
height:100%;
}
#bg>img{
height:100%;
}
#flex-box>img{
width:100%;
position:absolute;
z-index: -1
}
所以我跟随的设计是2个弹性盒子,一个包含菜单,标题和第二个弹性盒子的垂直盒子。还有一个水平的包含描述性文字和一些图像。这些最终用于处理响应,但我已经离开了这个例子,在我进入那个阶段之前我遇到了问题。
问题: