さまざまなブラウザでさまざまな高さのHTML要素

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

へのリンクのおかげで、私は私が

min-height: (height)px; 

Answer 2

box-sizingは、この特定の問題に対処するために作成されたCSSの属性で解決同様の問題がありました。主要なブラウザの3つすべてが高さを別々に計算します。 box-sizingを使用すると、もう少し一貫性が得られ、黄色のボックスの高さを設定して両方の画像に対応することができます。

ここサイジングボックスについて詳しく読む：http://css-tricks.com/box-sizing/

P.S.をbox-sizing

Answer 3

のような新しいHTML/CSS機能を備えたIE7のような古いブラウザでは、近代化ツール（http://www.modernizr.com）を使用して、ブラウザのようなものを同じようにレンダリングする必要はありません。テキストのサイズ、スペーシング、およびフローには、テキストの縦方向のスペースの大きさに影響する小さな違いがあります。

2つの異なる位置決めモデルがあります。サイト上のテキストは、相対的な配置を使用して配置されます。これは問題ありません。つまり、ユーザーがフォントサイズなどを変更すると、物事が流れることになります。あなたの画像は、絶対位置を使用して配置されます。つまり、テキストの大きさにかかわらず、正確なピクセル座標にとどまります。これらのオブジェクトは完全に異なった位置に配置されており、相互に影響を与えたり、ボックス内の "注意を払う"ことはありません。

他のものの上にフロートしたい場合は、大丈夫ですが、使用例に基づいて絶対的な配置を避け、float：rightのようなものを使用したいと思うでしょう。

もう1つの答えは最小高さを使用することでした。これは良い解決策ですが、ボックスが全く異なる位置決め方式にあるという事実は実際には変わりません。