响应式 img 容器 div Safari 5 img 未正确显示

Question

遇到了这个非常烦人的问题，我检查过的所有其他浏览器都设法创建了我正在搜索的内容，但 Safari 5.0.1 及以下版本似乎与我的代码不一致。 所以我的问题是，我在容器中得到的图像没有正确填充容器.. 我正在使用纵横比技巧，我不能对图像上的任何内容进行硬编码，因为在某些地方，内容是通过 CMS 使用的。哦，我需要 flex 内容来获得相同的列高，因为来自 DB 的文本可能会有所不同以及..任何帮助/提示将不胜感激..谢谢！

HTML

	#items-row::after {
	  display: table;
	}
	#items-row {
	  display: flex;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  width: 100%;
	  height: 100%;
	}
	#items-row .item {
	  width: 32%;
	  margin-left: 0.5%;
	  margin-right: 0.5%;
	  float: left;
	  background-color: #f5f5f5;
	  padding-bottom: 10px;
	  min-height: 100%;
	  display: inline-block;
	}
	#items-row .item .item-image {
	  height: 0px;
	  padding-top: 50%;
	  position: relative;
	  background-color: #666;
	  width: 100%;
	  overflow: hidden;
	  display: inline-block;
	}
	#items-row .item .item-image img {
	  margin-top: -50%;
	  position: absolute;
	  width: 100%;
	}
	

<div id="items-row">
  <div class="item">
    <a href="link">
      <div class="item-image">
        <img src="img" />
      </div>
      .....
    </a>
  </div>
  .... contains 3 more items...
</div>

这是 Safari 5.0.1 如何显示它的屏幕截图。看来，有人告诉我，三星平板电脑浏览器也是如此……（不知道到底是哪个，但我希望通过解决这个问题也能解决这个问题） http://noordkust.eu/problems/stackoverflow.jpg

暂时编辑.. 好的，这是我正在谈论的网站，它位于主页上，位于大图之后。 http://steeleryachts.com/nl/

另一个编辑！！ 经过大量搜索后，Safari 5 似乎根据“相对于包含块的高度”计算它的边距顶部。现在搜索它是从哪个版本开始修复的。不幸的是，我会，我认为别无选择，请解决此问题以解决此问题..

Answer 1

你可以使用 flexbox，而不是使用 flexbox

display: inline-block;

制作类似的东西：

.container {
  width: 24%;
  height: 300px;
  background: lightgray;
  display: inline-block;
  overflow: hidden;
  margin-top:10px;
  box-shadow:0px 0px 5px black;
}
.image {
  max-height: 60%;
  width: 100%;
  overflow: hidden;
}
.caption {
  text-align: center;
}

h1{
text-align:center;
}

<h1>HEADING</h1>

<hr/>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a caption</div>
</div>

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/g/200/300" alt="" />
  </div>
  <div class="caption">hello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a captionhello. this is a caption</div>
</div>

<hr/>

事实上，这可以减少很多，但为了您的学习，我将保留它。

---

这种设计让'captions'有一个固定的高度，如果内容超出这个高度，就会滚动：

.container {
  height: 300px;
  width: 24%;
  position: relative;
  background-color: lightgray;
  display: inline-block;
  vertical-align: top;
}
.caption {
  text-align: center;
  background-color: lightgray;
  height: 300px;
  max-height: 300px;
  overflow: auto;
  align-content:center;
}
img{
  height:100%;
  }
.imagewrapper{
  width:100%;
  height:100%;
  overflow:hidden;
}

<div class="wrapper">
  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/400/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm
      the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/300" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm
      the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the caption hi. I'm the long caption</div>
  </div>

  <div class="container">
    <div class="imagewrapper">
    <img src="http://placekitten.com/g/200/200" alt="" />
      </div>
    <div class="caption">hi. I'm the caption</div>
  </div>
</div>