Question

我在使用HTML和CSS时有点迷茫，我遇到了一个似乎无法解决的问题。下面是问题的链接和图像：

！[在此处输入图片说明] [1]

上部是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;
}

非常感谢所有答案。现在我用min-height解决了它。我会尝试漂浮。并感谢框大小文章的链接

Answer 1

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

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

如果你希望它们漂浮在其他任何东西之上，那很好，但你可能会想要避免基于你的用例的绝对定位并使用像float这样的东西：对。

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

Answer 2

我遇到了与

解决的类似问题

 min-height: (height)px;

Answer 3

创建了css属性box-sizing以解决此特定问题。所有三个主要浏览器都以不同的方式计算高度。通过使用box-sizing，您可以获得更多的一致性，然后设置黄色框的高度以适应两个图像。

在此处阅读有关框尺寸的更多信息：http://css-tricks.com/box-sizing/

P.S。我建议使用modernizer（http://www.modernizr.com）来帮助使用过时的浏览器，例如IE7，使用新的HTML / CSS功能，例如box-sizing

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

3 个答案: