html / css图像不会在浏览器调整大小时展开父元素

Question

主要是我正在寻找答案，无论这是预期行为还是浏览器错误..

不敢相信我之前从未遇到过这个问题，我做错了什么？

http://jsbin.com/baroqudafayu/1/edit?output

尝试调整浏览器大小，调整图片大小，父级（.item）保持相同的宽度。除非我手动触发重绘/重排。请注意，它在加载时可以正常工作。

html / css没什么特别的。

 <div class="wrap">
    <div class="slide">
      <div class="item">
        <img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg" alt="">
     </div>
   </div>
</div>

-

html, body {
  height: 100%;
  background: green;
}

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 50000px;
  height: 100%;
  letter-spacing: 0;
}

.item {
  display: inline-block;
  height: 100%;

  img {
    display: block;
    height: 100%;
  }
}

我尝试将.item上的内联块更改为阻止/浮动，以及更改组合显示，最大高度，最大宽度，高度，宽度几乎所有内容。什么都没有帮助。

编辑：

其他信息

• 应该在IE8中工作
• .item的原因是，可以添加叠加（位置绝对，宽度/高度100％）并在悬停时显示。

Answer 1

您可以重新考虑CSS并使用空格规则将图像保持在一行：

DEMO ，

<强> DEMO FULL PAGE

html, body, .wrap, .slide , .item, img {
  height:100%;
  margin:0;
  vertical-align:top;
  background:green;
}
.slide {
  white-space:nowrap;
}
.item {
  display:inline;  
  font-size:0.01px;/* kills somehow white-space in HTML code, reset it to childs if any text , like for alt attribute of image that could be usefull */
}

在这里：the inline-block <li> version