Question

div中包含的人像img不能正确设置它的高度...仅在FF（27.0.1）中。适用于Chrome和IE8。

我有以下内容：

html, body {
  margin: 0;
  border: 0;
  padding:0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.photo-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 79%;
  height: 100%;
  overflow-y: auto;
}
img#photo {
  margin-top: 0.5%;
  max-width: 100%;
  max-height: 95%;
}

在html中......

<div class="photo-container">
  <div id="pic"></div>
</div>
<script type="text/javascript">
    function f_pop(theImg) {
      document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
    }

http://jsfiddle.net/isherwood/sFZgn

注意：

照片为纵向。
适用于Chrome和IE8，但不适用于FF 27.0.1
在img＃photo中，我将高度更改为50％。 Chrome和IE8 将照片调整大小。在FF中它被截断（并且需要div的滚动条向下移动）。

我最初将此（没有photo-container）作为框架集中的页面，即层次结构为body, div id=pic。它在FF的设计中起作用。我将框架集转换为具有两列（div）的单个页面，右侧是photo-container，现在它在FF中不起作用。

非常感谢您的帮助。

感谢。

Answer 1

您需要在#pic上设置高度：

#pic {
    height: 100%;
}

http://jsfiddle.net/isherwood/sFZgn/2/

Answer 2

我通过移除img周围的div来解决这个问题。（这就是我在我的frameset版本中所拥有的，我不知道为什么我将它添加到这个2列div版本中）。还将照片容器从类更改为id。因此，CSS中唯一的变化是.photo-container变为#photo-container。

html

<div id="photo-container">
    <img id="photo" src="default.gif" alt="photo">
    <div id="blurb"></div>
    <div id="contributor"></div>
</div>

js

document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;

图像不符合Firefox中的最大高度

2 个答案: