다른 브라우저에서 높이가 다른 HTML 요소

Question

HTML과 CSS를 조금 어루 만져서 해결할 수없는 문제가 발생했습니다. 문제를 heres 링크 및 이미지!

[1]

상단 부분은 그것을 내가 원하는 방식으로 표시하는, 파이어 폭스 [여기 이미지 설명을 입력합니다].

아래는 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

에 대한 링크에 대한 감사 나는

min-height: (height)px; 

Answer 2

box-sizing이 특정 문제를 해결하기 위해 생성 된 CSS 속성으로 해결 비슷한 문제가 있었다. 세 가지 주요 브라우저 모두 높이를 다르게 계산합니다. box-sizing을 사용하면 약간의 일관성을 얻은 다음 두 이미지를 수용 할 수 있도록 노란색 상자의 높이를 설정할 수 있습니다.

여기 크기 조정 상자에 대한 자세한 내용을 읽어 http://css-tricks.com/box-sizing/

P.S.을 modernizer (http://www.modernizr.com)를 사용하여 IE7과 같은 새로운 HTML/CSS 기능이있는 새로운 브라우저를 사용하는 것이 좋습니다.

Answer 3

브라우저는 텍스트와 같은 것을 동일하게 렌더링 할 필요가 없습니다. 텍스트가 차지하는 수직 공간의 양에 영향을 줄 수있는 텍스트 크기, 간격 및 흐름에 약간의 차이가있을 수 있습니다.

두 가지 위치 모델이 있습니다. 사이트의 텍스트는 상대적 위치 지정을 사용하여 배치됩니다. 사용자가 글꼴 크기 등을 수정하면 상황이 바뀌는 것을 의미합니다. 이미지는 절대 위치 지정을 사용하여 배치됩니다. 즉, 텍스트의 크기가 아무리 크게 설정 되었더라도 정확한 픽셀 좌표에 머물러있게됩니다. 이 객체들은 완전히 다른 위치에 배치되어 서로 영향을주지 않으며 "안에있는"상자에주의를 기울이지 않습니다.

다른 것들 위에 올려 놓기를 원한다면 괜찮습니다.하지만 유스 케이스에 따라 절대 위치 지정을 피하고 float : right와 같은 것을 사용하려고 할 것입니다.

다른 답변은 최소 높이를 사용하는 것이 었습니다. 이것은 훌륭한 해결책이지만 상자가 완전히 다른 위치 지정 체계에 있다는 사실을 실제로 변경하지는 않습니다.