Safari呈现与Chrome

时间:2016-10-10 13:26:22

标签: html css google-chrome safari flexbox

我正在为一个网站开发一个基于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个弹性盒子,一个包含菜单,标题和第二个弹性盒子的垂直盒子。还有一个水平的包含描述性文字和一些图像。这些最终用于处理响应,但我已经离开了这个例子,在我进入那个阶段之前我遇到了问题。

问题:

The problem

0 个答案:

没有答案