加载时固定大小的图片在 chrome 中折叠答案

【问题标题】：Fixed size picture is collapsed in chrome while loading加载时固定大小的图片在 chrome 中折叠
【发布时间】：2013-01-02 07:55:48
【问题描述】：

我必须解决一个问题，即固定大小的图片向左浮动，但在图像尚未加载时它“折叠”（意味着它不占用它的假定宽度。

我为此制作了一个 jsfiddle，但在小提琴上，一切都运行良好，令人惊讶。（图像加载速度可能如此之快，但我对此表示怀疑，因为在我的系统上这很明显。

我的布局：

<div class="wrap">
  <a href="#somewhere">
    <img width="110" height="110" class="img" src="http://placehold.it/110x110" alt="Picture" />
  </a>
  <div class="bd">
    <h3>
      <a href="#somewhere">Lorem Ipsum</a>
    </h3>
    <div class="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sodales lectus. Suspendisse massa ipsum, tempor eget pharetra ac, gravida eu ipsum. Nam sit amet neque vitae dolor consequat volutpat quis et neque. Vestibulum ut purus in quam tincidunt ultricies. In consectetur eleifend dolor, fringilla dignissim lectus dapibus sit amet. Integer nec velit nisl. Cras quis molestie leo. Cras eget odio vel velit eleifend auctor ut a lacus. Suspendisse auctor tincidunt enim eu posuere. Cras dui magna, laoreet sit amet interdum nec, rutrum sit amet turpis. Donec mattis velit eu lectus condimentum luctus.</p>
    </div>
  </div>
</div>

相关的css：

.wrap {
    padding: 10px;
    margin: 10px 0px;
    overflow: hidden;
}

.img {
  float: left;
  margin-right: 10px;
}

.bd {
  min-width: 200px;
  overflow: hidden;
  zoom: 1;
}

在 jsfiddle 上：

http://jsfiddle.net/PT4ST/1/

真实页面（问题实际可见的地方）：

http://a4team.eu/multimedia-c376597?oldal=5

如果您使用 chrome 并检查“真实页面”，您会看到尚未加载的图像没有保留它的位置，就像该图像上的第二个块：

只需按几个 f5-s。

为什么会这样以及如何使图像在加载过程中占据它的位置？

我不是设计师，但我必须解决这个问题。而我一直没能找到问题的根源。

如果我明确地为图像标签指定 width="110"，其他浏览器（FF、IE、Opera）可以正常工作。

【问题讨论】：

标签： css image google-chrome collapse

【解决方案1】：

您可以尝试将浮动、宽度和高度分配给图像的容器，在本例中为 <a>。如果还不是这种情况，您可能需要将容器的显示属性更改为 block。

【讨论】：

如果我显示：阻止，文字呈现在图片下方。
你必须浮动图片的容器和.bd
你能修改我的jsfiddle吗？当它们是显示块时，我仍然无法将它们彼此相邻浮动。

【解决方案2】：

chrome 更新后，以下内容足以解决此问题：

.wrap .img {
    width: 110px;
    height: 110px;
}

这样，即使在加载过程中，chrome 也会尊重图片的大小。

【讨论】：