我有some code set up over at jsBin来测试flexbox,它在evey浏览器中工作正常(包括IE11),但在Safari 10.0.1中,.img
元素没有被拉伸到其父元素的高度。有什么想法吗?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
}
h1 {
padding-left: 20px;
}
.text {
font-size: 12px;
font-family: serif;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="article">
<div class="figure">
<div class="img">
<img src="http://json.tv/images/general/2014/09/08/thumbnail-20140908100224-3296.jpg" />
</div>
</div>
<div class="text">
<span class="cat">Lifestyle</span>
<h1>
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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</h1>
<span class="date">6. 6. 1966</span>
</div>
</div>
</div>
</body>
</html>
CSS:
img {
position: absolute;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.img {
position: relative;
height: 100%;
}
.figure, .text {
width: 50%;
overflow: hidden;
float: left;
}
.article {
display: flex;
min-height: 280px;
max-width: 690px;
background: white;
}
答案 0 :(得分:0)
我没有在safari 9.1.3中看到这个问题。
我会使用webkit前缀来进行flex。看起来你只是把display:flex;在所有的东西上,没有赋予灵活值,我会为你的包装尝试这样的东西。就你的形象风格而言,我无法准确看到你想要获得的东西。将图像的高度设置为100%是一个问题,因为这仅在父级具有静态高度时才有效。看起来,在那个和隐藏的溢出之间,你可能正在尝试实现像background-size这样的东西:cover;。 id调查那个。
https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
http://codepen.io/ErwanHesry/pen/JcvCw
.wrapper, .article {
display: -webkit-flex;
display: flex;
}
.figure, .text {
-webkit-flex:1;
flex:1;
}
.article {
min-height: 280px;
max-width: 690px;
background: white;
}
答案 1 :(得分:0)
完全删除.img
元素就可以了。就像Safari只拉伸相对于flex容器的直接元素一样(至少在播放时有绝对定位的图像的情况下)。