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

Question

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

上半部分是Firefox，按照我想要的方式显示。

在其下方是 Chrome(IE 显示为 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>

和CSS:

#top-content {
  background: green;
  padding: 20px 10px;
  position: relative;
}
#top-content-upper {
  background: yellow;
  padding: 15px 50% 15px 10px;
}
#top-content-upper h2 {
  margin-bottom: 15px;
}
#breadcrumbs {
  background: red;
  padding: 5px 0 5px 15px;
}
#featured1 {
  position: absolute;
  top: 40px;
  left: 600px;
  z-index: 2;
}
#featured2 {
  position: absolute;
  top: 80px;
  left: 640px;
  z-index: 1;
}

非常感谢您的所有回答。现在我使用最小高度解决了它。不过我会尝试漂浮。并感谢盒子尺寸文章的链接

Answer 1

浏览器不必完全相同地呈现文本等内容。文本大小、间距和流向可能存在细微差异，这可能会影响文本占用的垂直空间大小。

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

如果您希望它们 float 在其他任何东西之上，那很好，但您可能希望根据您的用例避免绝对定位，并使用类似 float:right 的东西。

另一个答案是使用最小高度。这是一个很好的解决方案，但它并没有真正改变盒子位于完全不同的定位方案上的事实。