在不同瀏覽器中具有不同高度的HTML元素

我在HTML和CSS上玩弄了一下，我遇到了一個我無法解決的問題。繼承人問題的鏈接和圖片：在不同瀏覽器中具有不同高度的HTML元素

[在這裏輸入的形象描述] [1]

上部是火狐，顯示它，我希望它的方式。

下面是Chrome（IE顯示它像鉻）。正如你所看到的，黃色部分的高度不足以用於圖片。

下面的代碼：

<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; 
}

非常感謝所有的答案。現在我用最小高度解決了它。我要去嘗試漂浮。並感謝鏈接到盒子大小的文章

來源

2012-03-09 marius2k12

相關閱讀：http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – 2012-03-09 17:29:19

我有一個類似的問題，我與

min-height: (height)px;

來源

2012-03-09 17:20:27 AshBrad

的CSS屬性box-sizing成立是爲了解決這一具體問題解決。所有三個主流瀏覽器都會以不同的方式計算高度。通過使用box-sizing，可以獲得更多一致性，然後設置黃色框的高度以適應兩個圖像。

瞭解更多關於盒大小的位置：http://css-tricks.com/box-sizing/

附：我建議使用modernizer（http://www.modernizr.com）來幫助像IE7這樣的過時瀏覽器提供新的HTML/CSS功能，例如box-sizing

來源

2012-03-09 17:22:12 t0nyh0

瀏覽器不必像文本一樣渲染文本。在文本大小，間距和流動方面可能存在細微的差異，這可能會影響文本佔用的垂直空間。

你有兩種不同的定位模型。網站上的文字使用相對定位進行定位，這很好。這意味着如果用戶修改他們的字體大小或類似的東西，事情會流動。您的圖像使用絕對定位進行定位，這意味着無論文本設置多大，它們都將保留在精確的像素座標中。這些物體的位置完全不同，不會互相影響，也不會注意它們「進入」的盒子。

如果你想讓它們漂浮在其他任何東西之上，那很好，但是你可能想要避免基於你的用例的絕對定位，並使用像float：right這樣的東西。

另一個答案是使用最小高度。這是一個很好的解決方案，但它並沒有真正改變箱子在完全不同的定位方案上的事實。

來源

2012-03-09 17:23:30 Chet

在不同瀏覽器中具有不同高度的HTML元素

回答

相關問題