在不同浏览器中具有不同高度的HTML元素

我在玩弄HTML和CSS，遇到了一个似乎无法解决的问题

上面的部分是Firefox，它以我想要的方式显示它

下面是Chrome（如Chrome所示）。如您所见，黄色部分的高度不足以显示图片

代码如下：

<section id="top-content">
  <div id="top-content-upper">
    <h2>Welcome to our Site</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
      nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      Donec pede justo, fringilla vel, aliquet nec, vulputate Lorem ipsum dolor
      sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
      pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
      pede justo, fringilla vel, aliquet nec, vulputate
    </p>
    <a href="#">Learn More</a>
    <a href="#">Our Work</a>
  </div>

  <img src="dragon.jpg" alt="dragon" id="featured1" />
  <img src="underconstrcution.jpg" alt="under construction" id="featured2" />

  <div id="breadcrumbs">Youre here: Home > Welcome</div>
</section>

---

非常感谢所有的答案。现在我用最小高度解决了这个问题。不过我要试着漂浮。谢谢你给我发了一个关于盒子大小的链接，我也解决了一个类似的问题

 min-height: (height)px;

---

css属性

框大小调整

就是为了解决这个特定问题而创建的。所有三种主要浏览器计算高度的方式都不同。通过使用

框大小调整

，您可以获得更高的一致性，然后设置黄色框的高度以容纳两幅图像

请在此处阅读有关框大小的更多信息：

---

顺便说一下，我建议使用现代化设备(http://www.modernizr.com)为了帮助使用像IE7这样的过时浏览器以及新的HTML/CSS功能，例如

框大小调整
浏览器不必以相同的方式呈现文本等内容。文本大小、间距和流量可能存在细微差异，这些差异可能会影响文本占用的垂直空间大小

你有两种不同的定位模型。站点上的文本使用相对定位进行定位，这很好。这意味着如果用户修改他们的字体大小或类似的东西，事情就会发生。您的图像使用绝对定位进行定位，这意味着无论文本设置得有多大，它们都将保持在精确的像素坐标上。这些对象的位置完全不同，不会相互影响，也不会注意它们“所在”的框

如果你想让它们漂浮在其他任何东西之上，那没关系，但是你可能会希望避免基于用例的绝对定位，并使用类似于漂浮的东西：对

另一个答案是使用最小高度。这是一个很好的解决方案，但它并没有真正改变盒子的定位方案完全不同的事实。
相关阅读：
 min-height: (height)px;